[Fix] no-unknown-property: add onError and onLoad for iframe/picture

Fixes #3410.

Co-authored-by: Emmanuel Vuigner <hi@maiis.me>
Co-authored-by: Aarni Koskela <akx@iki.fi>

Author: 2 people

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

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'],

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',
           },
         },
       ],