[Fix] no-unknown-property: only match data-* attributes containin…

…g `-` Fixes #3712
jsx-eslint · Mar 15, 2024 · 69de42e · 69de42e
1 parent da1013c
commit 69de42e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,10 +11,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: literalType error fix ([#3704][] @developer-bandi)
 * [`boolean-prop-naming`]: allow TSIntersectionType ([#3705][] @developer-bandi)
 * [`no-unknown-property`]: support `popover`, `popovertarget`, `popovertargetaction` attributes ([#3707][] @ljharb)
+* [`no-unknown-property`]: only match `data-*` attributes containing `-` ([#3713][] @silverwind)
 
 ### Changed
 * [`boolean-prop-naming`]: improve error message (@ljharb)
 
+[#3713]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3713
 [#3707]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3707
 [#3705]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3705
 [#3704]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3704

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -431,7 +431,7 @@ function normalizeAttributeCase(name) {
  * @returns {boolean} Result
  */
 function isValidDataAttribute(name) {
-  return !/^data-xml/i.test(name) && /^data(-?[^:]*)$/.test(name);
+  return !/^data-xml/i.test(name) && /^data-[^:]*$/.test(name);
 }
 
 /**

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -41,6 +41,10 @@ ruleTester.run('no-unknown-property', rule, {
       features: ['jsx namespace'],
     },
     { code: '<App clip-path="bar" />;' },
+    {
+      code: '<App dataNotAnDataAttribute="yes" />;',
+      options: [{ requireDataLowercase: true }],
+    },
     // Some HTML/DOM elements with common attributes should work
     { code: '<div className="bar"></div>;' },
     { code: '<div onMouseDown={this._onMouseDown}></div>;' },
@@ -603,7 +607,34 @@ ruleTester.run('no-unknown-property', rule, {
       ],
     },
     {
-      code: '<div data-testID="bar" data-under_sCoRe="bar" />;',
+      code: '<div data-testID="bar" data-under_sCoRe="bar" dataNotAnDataAttribute="yes" />;',
+      errors: [
+        {
+          messageId: 'dataLowercaseRequired',
+          data: {
+            name: 'data-testID',
+            lowerCaseName: 'data-testid',
+          },
+        },
+        {
+          messageId: 'dataLowercaseRequired',
+          data: {
+            name: 'data-under_sCoRe',
+            lowerCaseName: 'data-under_score',
+          },
+        },
+        {
+          messageId: 'unknownProp',
+          data: {
+            name: 'dataNotAnDataAttribute',
+            lowerCaseName: 'datanotandataattribute',
+          },
+        },
+      ],
+      options: [{ requireDataLowercase: true }],
+    },
+    {
+      code: '<App data-testID="bar" data-under_sCoRe="bar" dataNotAnDataAttribute="yes" />;',
       errors: [
         {
           messageId: 'dataLowercaseRequired',