[Fix] no-unknown-property: add more capture event properties

Fixes #3400.

Author: sjarva

CHANGELOG.md

@@ -10,7 +10,9 @@ 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)
 
+[#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

lib/rules/no-unknown-property.js

@@ -270,13 +270,27 @@ 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,
+  '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',
 ];
 
@@ -301,15 +315,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) {

tests/lib/rules/no-unknown-property.js

@@ -73,7 +73,7 @@ ruleTester.run('no-unknown-property', rule, {
     // React related attributes
     { code: '<div onPointerDown={this.onDown} onPointerUp={this.onUp} />' },
     { code: '<input type="checkbox" defaultChecked={this.state.checkbox} />' },
-    { code: '<div onTouchStart={this.startAnimation} onTouchEnd={this.stopAnimation} onTouchCancel={this.cancel} onTouchMove={this.move} onMouseMoveCapture={this.capture} />' },
+    { code: '<div onTouchStart={this.startAnimation} onTouchEnd={this.stopAnimation} onTouchCancel={this.cancel} onTouchMove={this.move} onMouseMoveCapture={this.capture} onTouchCancelCapture={this.log} />' },
     // Case ignored attributes, for `charset` discussion see https://github.com/jsx-eslint/eslint-plugin-react/pull/1863
     { code: '<meta charset="utf-8" />;' },
     { code: '<meta charSet="utf-8" />;' },