diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
index c206b5280d..dff69a291d 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
@@ -5,6 +5,56 @@ import rule, { RULE_NAME } from "./no-missing-button-type";
ruleTester.run(RULE_NAME, rule, {
invalid: [
+ {
+ code: tsx`;`,
+ errors: [
+ {
+ messageId: "noMissingButtonType",
+ suggestions: [
+ {
+ messageId: "addButtonType",
+ data: { type: "button" },
+ output: tsx`;`,
+ },
+ {
+ messageId: "addButtonType",
+ data: { type: "submit" },
+ output: tsx`;`,
+ },
+ {
+ messageId: "addButtonType",
+ data: { type: "reset" },
+ output: tsx`;`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ code: tsx`;`,
+ errors: [
+ {
+ messageId: "noMissingButtonType",
+ suggestions: [
+ {
+ messageId: "addButtonType",
+ data: { type: "button" },
+ output: tsx`;`,
+ },
+ {
+ messageId: "addButtonType",
+ data: { type: "submit" },
+ output: tsx`;`,
+ },
+ {
+ messageId: "addButtonType",
+ data: { type: "reset" },
+ output: tsx`;`,
+ },
+ ],
+ },
+ ],
+ },
{
code: tsx`;`,
errors: [
@@ -39,17 +89,17 @@ ruleTester.run(RULE_NAME, rule, {
{
messageId: "addButtonType",
data: { type: "button" },
- output: tsx`Click me;`,
+ output: tsx`Click me;`,
},
{
messageId: "addButtonType",
data: { type: "submit" },
- output: tsx`Click me;`,
+ output: tsx`Click me;`,
},
{
messageId: "addButtonType",
data: { type: "reset" },
- output: tsx`Click me;`,
+ output: tsx`Click me;`,
},
],
},
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts
index e26c600971..1030a12281 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts
@@ -12,9 +12,9 @@ export const RULE_FEATURES = [
export const BUTTON_TYPES = ["button", "submit", "reset"] as const;
-export type MessageID =
- | CamelCase
- | "addButtonType";
+export type MessageID = CamelCase | RuleSuggestMessageID;
+
+export type RuleSuggestMessageID = "addButtonType";
export default createRule<[], MessageID>({
meta: {
@@ -55,12 +55,12 @@ export function create(context: RuleContext): RuleListener {
attributeNode,
propNameOnJsx,
);
- if (attributeValue.kind === "some" && typeof attributeValue.value !== "string") {
+ if (attributeValue.kind !== "some" || typeof attributeValue.value !== "string") {
context.report({
messageId: "noMissingButtonType",
node: attributeNode,
suggest: getSuggest((type) => (fixer: RuleFixer) => {
- return fixer.replaceText(node, `${propNameOnJsx}="${type}"`);
+ return fixer.replaceText(attributeNode, `${propNameOnJsx}="${type}"`);
}),
});
}
@@ -71,9 +71,7 @@ export function create(context: RuleContext): RuleListener {
messageId: "noMissingButtonType",
node,
suggest: getSuggest((type) => (fixer: RuleFixer) => {
- const lastToken = context.sourceCode.getLastToken(node.openingElement);
- if (lastToken == null) return null;
- return fixer.insertTextBefore(lastToken, ` type="${type}"`);
+ return fixer.insertTextAfter(node.openingElement.name, ` type="${type}"`);
}),
});
}