Repository: jsx-eslint/eslint-plugin-react
Pull request #3398 (2022-09-05 08:00:04)

[Fix] no-unknown-property: onError and onLoad on <picture> and <iframe> elements
This PR adds:

- allows `onError` and `onLoad` property on `<picture>` element
- allows `onError` and `onLoad` property on `<iframe>` element

codecov[bot]: # [Codecov](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint) Report
> Merging [#3398](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint) (981d5d7) into [master](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/commit/7ba7ec4baba332c75a5dad0ea905327ae240821d?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint) (7ba7ec4) will **decrease** coverage by `3.13%`.
> The diff coverage is `n/a`.

```diff
@@            Coverage Diff             @@
##           master    #3398      +/-   ##
==========================================
- Coverage   97.58%   94.45%   -3.14%     
==========================================
  Files         123      123              
  Lines        8958     8958              
  Branches     3270     3270              
==========================================
- Hits         8742     8461     -281     
- Misses        216      497     +281     
```


| [Impacted Files](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint) | Coverage Δ | |
|---|---|---|
| [lib/rules/no-unknown-property.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL25vLXVua25vd24tcHJvcGVydHkuanM=) | `98.83% <ø> (ø)` | |
| [lib/util/propTypes.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3V0aWwvcHJvcFR5cGVzLmpz) | `68.21% <0.00%> (-29.22%)` | :arrow_down: |
| [lib/util/ast.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3V0aWwvYXN0Lmpz) | `73.19% <0.00%> (-23.20%)` | :arrow_down: |
| [lib/rules/hook-use-state.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL2hvb2stdXNlLXN0YXRlLmpz) | `88.40% <0.00%> (-11.60%)` | :arrow_down: |
| [lib/rules/boolean-prop-naming.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL2Jvb2xlYW4tcHJvcC1uYW1pbmcuanM=) | `91.56% <0.00%> (-7.84%)` | :arrow_down: |
| [lib/rules/no-unused-state.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL25vLXVudXNlZC1zdGF0ZS5qcw==) | `93.12% <0.00%> (-6.11%)` | :arrow_down: |
| [lib/rules/jsx-props-no-multi-spaces.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL2pzeC1wcm9wcy1uby1tdWx0aS1zcGFjZXMuanM=) | `94.11% <0.00%> (-5.89%)` | :arrow_down: |
| [lib/rules/no-unused-prop-types.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL25vLXVudXNlZC1wcm9wLXR5cGVzLmpz) | `90.00% <0.00%> (-4.00%)` | :arrow_down: |
| [lib/rules/no-invalid-html-attribute.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL25vLWludmFsaWQtaHRtbC1hdHRyaWJ1dGUuanM=) | `94.07% <0.00%> (-2.64%)` | :arrow_down: |
| [lib/rules/jsx-no-constructed-context-values.js](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint#diff-bGliL3J1bGVzL2pzeC1uby1jb25zdHJ1Y3RlZC1jb250ZXh0LXZhbHVlcy5qcw==) | `91.17% <0.00%> (-1.97%)` | :arrow_down: |
| ... and [5 more](https://codecov.io/gh/jsx-eslint/eslint-plugin-react/pull/3398/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint) | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=jsx-eslint)

archiii92: Could you also add 'onError' and 'onLoad' on <iframe> element?

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5af53fd7..1a333bf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,8 +12,11 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: `controlsList`, not `controlList` ([#3397][] @ljharb)
 * [`no-unknown-property`]: add more capture event properties ([#3402][] @sjarva)
 * [`no-unknown-property`]: Add more one word properties found in DefinitelyTyped's react/index.d.ts ([#3402][] @sjarva)
+* [`no-unknown-property`]: Mark onLoad/onError as supported on iframes ([#3398][] @maiis, [#3406][] @akx)
 
+[#3406]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3406
 [#3402]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3402
+[#3398]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3398
 [#3397]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3397
 [#3396]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3396
 [#3394]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3394
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index b3850ddd..6af662d1 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -68,8 +68,8 @@ const ATTRIBUTE_TAGS_MAP = {
   onEmptied: ['audio', 'video'],
   onEncrypted: ['audio', 'video'],
   onEnded: ['audio', 'video'],
-  onError: ['audio', 'video', 'img', 'link', 'source', 'script'],
-  onLoad: ['script', 'img', 'link'],
+  onError: ['audio', 'video', 'img', 'link', 'source', 'script', 'picture', 'iframe'],
+  onLoad: ['script', 'img', 'link', 'picture', 'iframe'],
   onLoadedData: ['audio', 'video'],
   onLoadedMetadata: ['audio', 'video'],
   onLoadStart: ['audio', 'video'],


Test patch:
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index c713ec92..d2f39932 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -50,7 +50,7 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<input type="password" required />' },
     { code: '<input ref={this.input} type="radio" />' },
     { code: '<div children="anything" />' },
-    { code: '<iframe scrolling="?" />' },
+    { code: '<iframe scrolling="?" onLoad={a} onError={b} />' },
     { code: '<input key="bar" type="radio" />' },
     { code: '<button disabled>You cannot click me</button>;' },
     { code: '<svg key="lock" viewBox="box" fill={10} d="d" stroke={1} strokeWidth={2} strokeLinecap={3} strokeLinejoin={4} transform="something" clipRule="else" x1={5} x2="6" y1="7" y2="8"></svg>' },
@@ -60,6 +60,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
     { code: '<video playsInline />' },
     { code: '<img onError={foo} onLoad={bar} />' },
+    { code: '<picture onError={foo} onLoad={bar} />' },
+    { code: '<iframe onError={foo} onLoad={bar} />' },
     { code: '<script onLoad={bar} onError={foo} />' },
     { code: '<source onError={foo} />' },
     { code: '<link onLoad={bar} onError={foo} />' },
@@ -400,7 +402,7 @@ ruleTester.run('no-unknown-property', rule, {
           data: {
             name: 'onError',
             tagName: 'div',
-            allowedTags: 'audio, video, img, link, source, script',
+            allowedTags: 'audio, video, img, link, source, script, picture, iframe',
           },
         },
       ],
@@ -413,7 +415,7 @@ ruleTester.run('no-unknown-property', rule, {
           data: {
             name: 'onLoad',
             tagName: 'div',
-            allowedTags: 'script, img, link',
+            allowedTags: 'script, img, link, picture, iframe',
           },
         },
       ],