[Fix] no-unknown-property: allow webkitDirectory on input, case-insensitive

Fixes #3454

Author: ljharb

CHANGELOG.md

@@ -12,12 +12,14 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`jsx-no-constructed-context-values`]: fix false positive for usage in non-components ([#3448][] @golopot)
 * [`static-property-placement`]: warn on nonstatic expected-statics ([#2581][] @ljharb)
 * [`no-unknown-property`]: properly tag-restrict case-insensitive attributes (@ljharb)
+* [`no-unknown-property`]: allow `webkitDirectory` on `input`, case-insensitive ([#3454][] @ljharb)
 
 ### Changed
 * [Docs] [`no-unknown-property`]: fix typo in link ([#3445][] @denkristoffer)
 * [Perf] component detection: improve performance by optimizing getId ([#3451][] @golopot)
 * [Docs] [`no-unstable-nested-components`]: Warn about memoized, nested components ([#3444][] @eps1lon)
 
+[#3454]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3454
 [#3451]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3451
 [#3448]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3448
 [#3445]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3445

lib/rules/no-unknown-property.js

@@ -111,6 +111,7 @@ const ATTRIBUTE_TAGS_MAP = {
   preload: ['audio', 'video'],
   scrolling: ['iframe'],
   returnValue: ['dialog'],
+  webkitDirectory: ['input'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {
@@ -310,7 +311,7 @@ const DOM_PROPERTY_NAMES_TWO_WORDS = [
   'autoPictureInPicture', 'controlsList', 'disablePictureInPicture', 'disableRemotePlayback',
 ];
 
-const DOM_PROPERTIES_IGNORE_CASE = ['charset', 'allowFullScreen', 'webkitAllowFullScreen', 'mozAllowFullScreen'];
+const DOM_PROPERTIES_IGNORE_CASE = ['charset', 'allowFullScreen', 'webkitAllowFullScreen', 'mozAllowFullScreen', 'webkitDirectory'];
 
 const ARIA_PROPERTIES = [
   // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes

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

@@ -49,6 +49,8 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<img src="cat_keyboard.jpeg" alt="A cat sleeping on a keyboard" align="top" />' },
     { code: '<input type="password" required />' },
     { code: '<input ref={this.input} type="radio" />' },
+    { code: '<input type="file" webkitdirectory="" />' },
+    { code: '<input type="file" webkitDirectory="" />' },
     { code: '<div children="anything" />' },
     { code: '<iframe scrolling="?" onLoad={a} onError={b} align="top" />' },
     { code: '<input key="bar" type="radio" />' },
@@ -579,5 +581,31 @@ ruleTester.run('no-unknown-property', rule, {
         },
       ],
     },
+    {
+      code: '<div webkitDirectory="" />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'webkitDirectory',
+            tagName: 'div',
+            allowedTags: 'input',
+          },
+        },
+      ],
+    },
+    {
+      code: '<div webkitdirectory="" />',
+      errors: [
+        {
+          messageId: 'invalidPropOnTag',
+          data: {
+            name: 'webkitdirectory',
+            tagName: 'div',
+            allowedTags: 'input',
+          },
+        },
+      ],
+    },
   ]),
 });