[Fix] #3400 add more capture event properties

jsx-eslint · Sep 5, 2022 · 4a1cc5a · 4a1cc5a
1 parent 072d8e1
commit 4a1cc5a
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/lib/rules/no-unknown-property.js b/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',
   'onPointerCancel',
+  'onPointerCancelCapture',
   'onPointerDown',
+  'onPointerDownCapture',
   'onPointerEnter',
+  'onPointerEnterCapture',
   'onPointerLeave',
+  'onPointerLeaveCapture',
   'onPointerMove',
+  'onPointerMoveCapture',
   'onPointerOut',
+  'onPointerOutCapture',
   'onPointerOver',
+  'onPointerOverCapture',
   'onPointerUp',
+  'onPointerUpCapture',
+  'onLostPointerCapture',
+  'onLostPointerCaptureCapture',
 ];
 
 function getDOMPropertyNames(context) {

diff --git 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: '<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" />;' },