Repository: jsx-eslint/eslint-plugin-react (JavaScript)

Issue:
[Bug]: onResize reported by react/no-unknown-property on video elements
### Is there an existing issue for this?

- [X] I have searched the existing issues and my issue is unique
- [X] My issue appears in the command-line and not only in the text editor

### Description Overview

HTMLMediaElements have a [`resize` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events) that has been [added in react 18](https://github.com/facebook/react/blob/b0671f9ea03133298144f169f1062d274f7f57c0/CHANGELOG.md#react-dom-2). When using `onResize` on a video element, the rule `react/no-unknown-property` reports an error. Typescript is however happy with it and let me build the application if I ignore the rule.

![image](https://github.com/jsx-eslint/eslint-plugin-react/assets/7324857/5bce76da-236b-44db-bd55-17204d6e1d70)

### Expected Behavior

No error report when using `onResize` on an HTMLMediaElement.

### eslint-plugin-react version

v7.32.2

### eslint version

v8.43.0

### node version

v20.3.0


Discussion:

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff40414408..a7f3fcca62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add requireDataLowercase option ([#3645][] @HermanBilous)
 * [`no-unknown-property`]: add `displaystyle` on `<math>` ([#3652][] @lounsbrough)
 * [`prefer-read-only-props`], [`prop-types`], component detection: allow components to be async functions ([#3654][] @pnodet)
+* [`no-unknown-property`]: support `onResize` on audio/video tags ([#3662][] @caesar1030)
 
 ### Fixed
 * [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)
@@ -24,6 +25,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-props-no-multi-spaces`]: extract type parameters to var ([#3634][] @HenryBrown0)
 * [Docs] [`jsx-key`]: fix correct example ([#3656][] @developer-bandi)
 
+[#3662]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3662
 [#3656]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3656
 [#3654]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3654
 [#3652]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3652
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 2fc127b15f..51ec84572f 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -93,6 +93,7 @@ const ATTRIBUTE_TAGS_MAP = {
   onPlaying: ['audio', 'video'],
   onProgress: ['audio', 'video'],
   onRateChange: ['audio', 'video'],
+  onResize: ['audio', 'video'],
   onSeeked: ['audio', 'video'],
   onSeeking: ['audio', 'video'],
   onStalled: ['audio', 'video'],
@@ -296,7 +297,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   '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',
+  'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onResize',
   'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting',
   'onCopyCapture', 'onCutCapture', 'onPasteCapture', 'onCompositionEndCapture', 'onCompositionStartCapture', 'onCompositionUpdateCapture',
   'onFocusCapture', 'onBlurCapture', 'onChangeCapture', 'onBeforeInputCapture', 'onInputCapture', 'onResetCapture', 'onSubmitCapture',


Test patch:
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 54c23785dd..0f4fbbebc1 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -128,8 +128,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<path fill="pink" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"></path>' },
     { code: '<line fill="pink" x1="0" y1="80" x2="100" y2="20"></line>' },
     { code: '<link as="audio">Audio content</link>' },
-    { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
-    { code: '<audio controlsList="nodownload" controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
+    { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true} onResize={this.onResize}></video>' },
+    { code: '<audio controlsList="nodownload" controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error} onResize={this.onResize}></audio>' },
     { code: '<marker id={markerId} viewBox="0 0 2 2" refX="1" refY="1" markerWidth="1" markerHeight="1" orient="auto" />' },
     { code: '<pattern id="pattern" viewBox="0,0,10,10" width="10%" height="10%" />' },
     { code: '<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2" />' },
@@ -413,7 +413,7 @@ ruleTester.run('no-unknown-property', rule, {
       ],
     },
     {
-      code: '<div onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error} />',
+      code: '<div onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onResize={this.resize} onError={this.error} />',
       errors: [
         {
           messageId: 'invalidPropOnTag',
@@ -447,6 +447,14 @@ ruleTester.run('no-unknown-property', rule, {
             allowedTags: 'audio, video',
           },
         },
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'onResize',
+            tagName: 'div',
+            allowedTags: 'audio, video',
+          },
+        },
         {
           messageId: 'invalidPropOnTag',
           data: {