Skip to content

Commit

Permalink
[Fix] no-unknown-property: children is always an acceptable prop;…
Browse files Browse the repository at this point in the history
… iframes have `scrolling`; video has `playsInline`
  • Loading branch information
ljharb committed Sep 4, 2022
1 parent 7d4fe18 commit a2ec87d
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -9,6 +9,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
* [`no-unknown-property`]: add properties `onToggle`, `fill`, `as`, and pointer events ([#3385][] @sjarva)
* [`no-unknown-property`]: add `defaultChecked` property ([#3385][] @sjarva)
* [`no-unknown-property`]: add touch and media event related properties ([#3385][] @sjarva)
* [`no-unknown-property`]: `children` is always an acceptable prop; iframes have `scrolling`; ; video has `playsInline` ([#3385][] @ljharb)

[#3385]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3385

Expand Down
4 changes: 3 additions & 1 deletion lib/rules/no-unknown-property.js
Expand Up @@ -79,6 +79,8 @@ const ATTRIBUTE_TAGS_MAP = {
onTimeUpdate: ['audio', 'video'],
onVolumeChange: ['audio', 'video'],
onWaiting: ['audio', 'video'],
scrolling: ['iframe'],
playsInline: ['video'],
};

const SVGDOM_ATTRIBUTE_NAMES = {
Expand Down Expand Up @@ -195,7 +197,7 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [
// OpenGraph meta tag attributes
'property',
// React specific attributes
'ref', 'key',
'ref', 'key', 'children',
];

const DOM_PROPERTY_NAMES_TWO_WORDS = [
Expand Down
3 changes: 3 additions & 0 deletions tests/lib/rules/no-unknown-property.js
Expand Up @@ -48,12 +48,15 @@ ruleTester.run('no-unknown-property', rule, {
{ code: '<img src="cat_keyboard.jpeg" alt="A cat sleeping on a keyboard" />' },
{ code: '<input type="password" required />' },
{ code: '<input ref={this.input} type="radio" />' },
{ code: '<div children="anything" />' },
{ code: '<iframe scrolling="?" />' },
{ 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>' },
{ code: '<g fill="#7B82A0" fillRule="evenodd"></g>' },
{ code: '<meta property="og:type" content="website" />' },
{ code: '<input type="checkbox" checked={checked} disabled={disabled} id={id} onChange={onChange} />' },
{ code: '<video playsInline />' },
// React related attributes
{ code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
{ code: '<input type="checkbox" defaultChecked={this.state.checkbox} />' },
Expand Down

0 comments on commit a2ec87d

Please sign in to comment.