From 0b63c45fd2af62550560815dc0b267d1c5dd75e3 Mon Sep 17 00:00:00 2001
From: Jordan Harband <ljharb@gmail.com>
Date: Sat, 8 Oct 2022 09:00:27 -0700
Subject: [PATCH] [Fix] `no-unknown-property`: allow `webkitDirectory` on
 `input`, case-insensitive

Fixes #3454
---
 CHANGELOG.md                           |  2 ++
 lib/rules/no-unknown-property.js       |  3 ++-
 tests/lib/rules/no-unknown-property.js | 28 ++++++++++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 293a4c1541..ff129a47ee 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index b7b9e9e151..7c8b66ac24 100644
--- a/lib/rules/no-unknown-property.js
+++ b/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
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 5ba9f21f11..2fbc264185 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/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',
+          },
+        },
+      ],
+    },
   ]),
 });