[Fix] no-unknown-property: support popover, popovertarget, `pop…

…overtargetaction` attributes Fixes #3707
jsx-eslint · Mar 12, 2024 · c3275a4 · c3275a4
1 parent a920463
commit c3275a4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,10 +10,12 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`boolean-prop-naming`]: detect TS interfaces ([#3701][] @developer-bandi)
 * [`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)
 
 ### Changed
 * [`boolean-prop-naming`]: improve error message (@ljharb)
 
+[#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
 [#3701]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3701

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -238,6 +238,8 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
   'results', 'security',
   // Video specific
   'controls',
+  // popovers
+  'popover', 'popovertarget', 'popovertargetaction',
 ];
 
 const DOM_PROPERTY_NAMES_TWO_WORDS = [

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -169,6 +169,15 @@ ruleTester.run('no-unknown-property', rule, {
         </div>
       `,
     },
+    {
+      code: `
+        <div>
+          <button popovertarget="my-popover" popovertargetaction="toggle">Open Popover</button>
+
+          <div popover id="my-popover">Greetings, one and all!</div>
+        </div>
+      `,
+    },
   ]),
   invalid: parsers.all([
     {
-Original file line number
+Diff line change
@@ Expand Up / @@ -169,6 +169,15 @@ ruleTester.run('no-unknown-property', rule, { @@
             </div>
           `,
         },
+        {
+          code: `
+            <div>
+              <button popovertarget="my-popover" popovertargetaction="toggle">Open Popover</button>
+              <div popover id="my-popover">Greetings, one and all!</div>
+            </div>
+          `,
+        },
       ]),
       invalid: parsers.all([
         {
@@ Expand Down @@