From 90121f5e995eff6b5f045d45ac5ec229b5f9b591 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 20 May 2025 18:12:19 -0700 Subject: [PATCH] Allow "name" attribute for input, select, textarea elements Allows this attribute to be used on web. No support for native at this time. Close #309 --- apps/examples/src/components/App.js | 10 +++++++--- apps/website/docs/api/03-html/05-input.md | 1 + apps/website/docs/api/03-html/10-select.md | 1 + apps/website/docs/api/03-html/11-textarea.md | 1 + apps/website/docs/api/03-html/index.md | 3 +++ packages/react-strict-dom/src/shared/isPropAllowed.js | 1 + .../src/types/StrictReactDOMInputProps.js | 1 + .../src/types/StrictReactDOMSelectProps.js | 1 + .../src/types/StrictReactDOMTextAreaProps.js | 1 + .../tests/__snapshots__/html-test.js.snap-dom | 3 +++ packages/react-strict-dom/tests/html-test.js | 3 +++ 11 files changed, 23 insertions(+), 3 deletions(-) diff --git a/apps/examples/src/components/App.js b/apps/examples/src/components/App.js index 19dc3632..ef1c02f5 100644 --- a/apps/examples/src/components/App.js +++ b/apps/examples/src/components/App.js @@ -220,7 +220,11 @@ function Shell(): React.MixedElement { {/**/} - + @@ -237,7 +241,7 @@ function Shell(): React.MixedElement { - + @@ -245,7 +249,7 @@ function Shell(): React.MixedElement { - + diff --git a/apps/website/docs/api/03-html/05-input.md b/apps/website/docs/api/03-html/05-input.md index b6ffe2d7..4c5afb2e 100644 --- a/apps/website/docs/api/03-html/05-input.md +++ b/apps/website/docs/api/03-html/05-input.md @@ -34,6 +34,7 @@ const Foo = () => ( * `min` * `minLength` * `multiple` +* `name` * `onBeforeInput` * `onChange` * `onInput` diff --git a/apps/website/docs/api/03-html/10-select.md b/apps/website/docs/api/03-html/10-select.md index 79c4bd19..8ec29bec 100644 --- a/apps/website/docs/api/03-html/10-select.md +++ b/apps/website/docs/api/03-html/10-select.md @@ -25,6 +25,7 @@ const Foo = () => ( * [...Common props](/api/html/common/) * `autoComplete` * `multiple` +* `name` * `required` * `onBeforeInput` * `onChange` diff --git a/apps/website/docs/api/03-html/11-textarea.md b/apps/website/docs/api/03-html/11-textarea.md index 3e8a0e36..d6ef7651 100644 --- a/apps/website/docs/api/03-html/11-textarea.md +++ b/apps/website/docs/api/03-html/11-textarea.md @@ -30,6 +30,7 @@ const Foo = () => ( * `disabled` * `maxLength` * `minLength` +* `name` * `onBeforeInput` * `onChange` * `onInput` diff --git a/apps/website/docs/api/03-html/index.md b/apps/website/docs/api/03-html/index.md index 8cb39d43..ed5c16ac 100644 --- a/apps/website/docs/api/03-html/index.md +++ b/apps/website/docs/api/03-html/index.md @@ -179,6 +179,9 @@ The following tables represent the compatibility status of the strict HTML API s | minLength (input) | ❌ | ❌ | | | minLength (textarea) | ❌ | ❌ | | | multiple (select) | ❌ | ❌ | | +| name (input) | ❌ | ❌ | | +| name (select) | ❌ | ❌ | | +| name (textarea) | ❌ | ❌ | | | onAuxClick | ❌ | ❌ | [#38](https://github.com/facebook/react-strict-dom/issues/38) | | onBeforeInput (input) | ❌ | ❌ | [#38](https://github.com/facebook/react-strict-dom/issues/38) | | onBeforeInput (select) | ❌ | ❌ | [#38](https://github.com/facebook/react-strict-dom/issues/38) | diff --git a/packages/react-strict-dom/src/shared/isPropAllowed.js b/packages/react-strict-dom/src/shared/isPropAllowed.js index 29dfbb6f..24818188 100644 --- a/packages/react-strict-dom/src/shared/isPropAllowed.js +++ b/packages/react-strict-dom/src/shared/isPropAllowed.js @@ -87,6 +87,7 @@ const strictAttributeSet: Set = new Set([ 'min', // input 'minLength', // input, textarea 'multiple', // input, select + 'name', // input, select, textarea 'onAuxClick', 'onBeforeInput', // input, select, textarea 'onBlur', diff --git a/packages/react-strict-dom/src/types/StrictReactDOMInputProps.js b/packages/react-strict-dom/src/types/StrictReactDOMInputProps.js index 2df769d4..eb2b6224 100644 --- a/packages/react-strict-dom/src/types/StrictReactDOMInputProps.js +++ b/packages/react-strict-dom/src/types/StrictReactDOMInputProps.js @@ -21,6 +21,7 @@ export type StrictReactDOMInputProps = $ReadOnly<{ min?: ?(string | number), minLength?: ?number, multiple?: ?boolean, + name?: ?string, onBeforeInput?: $FlowFixMe, onChange?: $FlowFixMe, onInput?: $FlowFixMe, diff --git a/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js b/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js index d711c5b0..76754030 100644 --- a/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js +++ b/packages/react-strict-dom/src/types/StrictReactDOMSelectProps.js @@ -13,6 +13,7 @@ export type StrictReactDOMSelectProps = $ReadOnly<{ ...StrictReactDOMProps, autoComplete?: AutoComplete, multiple?: ?boolean, + name?: ?string, required?: ?boolean, onBeforeInput?: $FlowFixMe, onChange?: $FlowFixMe, diff --git a/packages/react-strict-dom/src/types/StrictReactDOMTextAreaProps.js b/packages/react-strict-dom/src/types/StrictReactDOMTextAreaProps.js index 7889d5a7..e0f4ecdb 100644 --- a/packages/react-strict-dom/src/types/StrictReactDOMTextAreaProps.js +++ b/packages/react-strict-dom/src/types/StrictReactDOMTextAreaProps.js @@ -16,6 +16,7 @@ export type StrictReactDOMTextAreaProps = $ReadOnly<{ disabled?: ?boolean, maxLength?: ?number, minLength?: ?number, + name?: ?string, onBeforeInput?: $FlowFixMe, onChange?: $FlowFixMe, onInput?: $FlowFixMe, diff --git a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom index 3e356de1..f74ce9f5 100644 --- a/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom +++ b/packages/react-strict-dom/tests/__snapshots__/html-test.js.snap-dom @@ -3552,6 +3552,7 @@ exports[`html "input" supports additional input attributes 1`] = ` min="0" minLength="0" multiple={true} + name="user-firstname" onBeforeInput={[Function]} onChange={[Function]} onInput={[Function]} @@ -5477,6 +5478,7 @@ exports[`html "select" supports additional select attributes 1`] = `