[Fix] no-unknown-property: support popover, popovertarget, popovertargetaction attributes

ljharb · ljharb · commit c3275a4fb2e7 · 2024-03-11T20:00:53.000-07:00
Fixes #3707
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([
     {
