From e6be146016c8bf1c4e16f8723ceed1a263465b13 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 15 Mar 2024 01:58:15 +0100
Subject: [PATCH] [Fix] `no-unknown-property`: only match data attributes
 containing `-`

Fixes: https://github.com/jsx-eslint/eslint-plugin-react/issues/3712
---
 CHANGELOG.md                           |  2 ++
 lib/rules/no-unknown-property.js       |  2 +-
 tests/lib/rules/no-unknown-property.js | 33 +++++++++++++++++++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b14a5c1bd7..2a0d7424f6 100644
--- 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
index 781e5495bc..9491f9c658 100644
--- 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
index 704d8429d5..afb95ac2fb 100644
--- 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',