diff --git a/CHANGELOG.md b/CHANGELOG.md index b3e3aac813..5af53fd728 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange * [`no-unknown-property`]: add `download` property support for `a` and `area` ([#3394][] @HJain13) * [`no-unknown-property`]: allow `webkitAllowFullScreen` and `mozAllowFullScreen` ([#3396][] @ljharb) * [`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) +[#3402]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3402 [#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 57d08f87a8..b3850ddd87 100644 --- a/lib/rules/no-unknown-property.js +++ b/lib/rules/no-unknown-property.js @@ -194,10 +194,10 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [ 'accept', 'action', 'allow', 'alt', 'as', 'async', 'buffered', 'capture', 'challenge', 'cite', 'code', 'cols', 'content', 'coords', 'csp', 'data', 'decoding', 'default', 'defer', 'disabled', 'form', 'headers', 'height', 'high', 'href', 'icon', 'importance', 'integrity', 'kind', 'label', - 'language', 'loading', 'list', 'loop', 'low', 'max', 'media', 'method', 'min', 'multiple', 'muted', + 'language', 'loading', 'list', 'loop', 'low', 'manifest', 'max', 'media', 'method', 'min', 'multiple', 'muted', 'name', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'poster', 'preload', 'profile', - 'rel', 'required', 'reversed', 'role', 'rows', 'sandbox', 'scope', 'selected', 'shape', 'size', 'sizes', - 'span', 'src', 'start', 'step', 'target', 'type', 'value', 'width', 'wrap', + 'rel', 'required', 'reversed', 'role', 'rows', 'sandbox', 'scope', 'seamless', 'selected', 'shape', 'size', 'sizes', + 'span', 'src', 'start', 'step', 'summary', 'target', 'type', 'value', 'width', 'wmode', 'wrap', // SVG attributes // See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute 'accumulate', 'additive', 'alphabetic', 'amplitude', 'ascent', 'azimuth', 'bbox', 'begin', @@ -214,6 +214,8 @@ const DOM_PROPERTY_NAMES_ONE_WORD = [ 'property', // React specific attributes 'ref', 'key', 'children', + // Non-standard + 'results', 'security', // Video specific 'controls', ]; @@ -270,14 +272,28 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [ 'autoCorrect', // https://stackoverflow.com/questions/47985384/html-autocorrect-for-text-input-is-not-working 'autoSave', // https://stackoverflow.com/questions/25456396/what-is-autosave-attribute-supposed-to-do-how-do-i-use-it // React specific attributes https://reactjs.org/docs/dom-elements.html#differences-in-attributes - 'className', 'dangerouslySetInnerHTML', 'defaultValue', 'defaultChecked', 'htmlFor', 'onChange', + 'className', 'dangerouslySetInnerHTML', 'defaultValue', 'defaultChecked', 'htmlFor', + // Events' capture events + 'onBeforeInput', 'onChange', 'onInvalid', 'onReset', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', - 'onMouseMoveCapture', - // Video specific, - 'autoPictureInPicture', 'controlList', 'disablePictureInPicture', 'disableRemotePlayback', + 'onCopyCapture', 'onCutCapture', 'onPasteCapture', 'onCompositionEndCapture', 'onCompositionStartCapture', 'onCompositionUpdateCapture', + 'onFocusCapture', 'onBlurCapture', 'onChangeCapture', 'onBeforeInputCapture', 'onInputCapture', 'onResetCapture', 'onSubmitCapture', + 'onInvalidCapture', 'onLoadCapture', 'onErrorCapture', 'onKeyDownCapture', 'onKeyPressCapture', 'onKeyUpCapture', + 'onAbortCapture', 'onCanPlayCapture', 'onCanPlayThroughCapture', 'onDurationChangeCapture', 'onEmptiedCapture', 'onEncryptedCapture', + 'onEndedCapture', 'onLoadedDataCapture', 'onLoadedMetadataCapture', 'onLoadStartCapture', 'onPauseCapture', 'onPlayCapture', + 'onPlayingCapture', 'onProgressCapture', 'onRateChangeCapture', 'onSeekedCapture', 'onSeekingCapture', 'onStalledCapture', 'onSuspendCapture', + 'onTimeUpdateCapture', 'onVolumeChangeCapture', 'onWaitingCapture', 'onSelectCapture', 'onTouchCancelCapture', 'onTouchEndCapture', + 'onTouchMoveCapture', 'onTouchStartCapture', 'onScrollCapture', 'onWheelCapture', 'onAnimationEndCapture', 'onAnimationIteration', + 'onAnimationStartCapture', 'onTransitionEndCapture', + 'onAuxClick', 'onAuxClickCapture', 'onClickCapture', 'onContextMenuCapture', 'onDoubleClickCapture', + 'onDragCapture', 'onDragEndCapture', 'onDragEnterCapture', 'onDragExitCapture', 'onDragLeaveCapture', + 'onDragOverCapture', 'onDragStartCapture', 'onDropCapture', 'onMouseDown', 'onMouseDownCapture', + 'onMouseMoveCapture', 'onMouseOutCapture', 'onMouseOverCapture', 'onMouseUpCapture', + // Video specific + 'autoPictureInPicture', 'controlsList', 'disablePictureInPicture', 'disableRemotePlayback', ]; const DOM_PROPERTIES_IGNORE_CASE = ['charset', 'allowFullScreen', 'webkitAllowFullScreen', 'mozAllowFullScreen']; @@ -301,15 +317,26 @@ const ARIA_PROPERTIES = [ const REACT_ON_PROPS = [ 'onGotPointerCapture', + 'onGotPointerCaptureCapture', + 'onLostPointerCapture', 'onLostPointerCapture', + 'onLostPointerCaptureCapture', 'onPointerCancel', + 'onPointerCancelCapture', 'onPointerDown', + 'onPointerDownCapture', 'onPointerEnter', + 'onPointerEnterCapture', 'onPointerLeave', + 'onPointerLeaveCapture', 'onPointerMove', + 'onPointerMoveCapture', 'onPointerOut', + 'onPointerOutCapture', 'onPointerOver', + 'onPointerOverCapture', 'onPointerUp', + 'onPointerUpCapture', ]; function getDOMPropertyNames(context) { diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js index 38d42118bc..c713ec9239 100644 --- a/tests/lib/rules/no-unknown-property.js +++ b/tests/lib/rules/no-unknown-property.js @@ -73,7 +73,7 @@ ruleTester.run('no-unknown-property', rule, { // React related attributes { code: '
' }, { code: '' }, - { code: '
' }, + { code: '
' }, // Case ignored attributes, for `charset` discussion see https://github.com/jsx-eslint/eslint-plugin-react/pull/1863 { code: ';' }, { code: ';' },