feat(core): native form participation for custom inputs via htmlName#3558
Open
arham766 wants to merge 1 commit into
Open
feat(core): native form participation for custom inputs via htmlName#3558arham766 wants to merge 1 commit into
arham766 wants to merge 1 commit into
Conversation
Implements the hidden-native-input pattern from the facebook#3343 Tier 3 form serialization strategy. Switch, CheckboxInput, RadioList, Slider, Selector, MultiSelector, and Tokenizer accept the same htmlName prop TextInput and NumberInput already had, so they serialize into native form submission: - Switch/CheckboxInput forward the name onto their native checkbox and withhold it while disabled (with a disabledMessage the input stays focusable rather than natively disabled, and a disabled control must not submit). - RadioList exposes the group name (falling back to the internal useId name); focusable-disabled radios detach from the form with form="" so they keep their grouping name without submitting. This also stops the pre-existing leak of internal useId names into form data for focusable-disabled groups. - Slider renders hidden inputs for the current value (two entries in range mode, like paired native range inputs). - Selector renders one hidden input with the selected value (empty string when nothing is selected, like a placeholder option). - MultiSelector/Tokenizer render one hidden input per selected value/item id, matching native multi-select serialization. - All hidden carriers set disabled={isDisabled} so FormData excludes them exactly like native disabled controls. Part of facebook#3343
|
@arham766 is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
meta-cla
Bot
added
the
CLA Signed
arham766
requested review from
cixzhang,
ejhammond,
imdreamrunner,
josephfarina,
marie-lucas,
nynexman4464 and
thedjpetersen
as code owners
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the form serialization strategy from #3343 (Tier 3): "hidden native input pattern across Selector, MultiSelector, Tokenizer, Slider, Switch, Checkbox, RadioList".
Today none of these seven components can participate in a native
<form>— none accepts aname, soFormData/submission silently drops them. This PR gives all seven the samehtmlNamepropTextInput/NumberInputalready have, with serialization that mirrors what the equivalent native control would do:nameon the existing native checkbox"on"when checked, absent otherwise (native checkbox semantics)htmlNameoverrides the internaluseIdgroup namevalueString(value); two entries under one name in range mode""when empty (like a placeholder<option value="">)<select multiple>serialization (getAll)idsDisabled semantics are uniform: a disabled control never submits. Hidden carriers set
disabled={isDisabled}; Switch/CheckboxInput withhold the name while disabled (with adisabledMessagethe input intentionally stays focusable rather than natively disabled — see the existing aria-disabled pattern — so the name alone must gate submission); focusable-disabled radios detach withform=""since they must keep their name for grouping. The radio change also fixes a pre-existing leak: focusable-disabled RadioLists were submitting their selected value under the internaluseIdname (e.g._r_0_=a) into any host form.Everything is opt-in — without
htmlNamenothing changes (RadioList keeps its generated internal name).Docs:
htmlNamerows added to all sevendoc.mjsfiles in the English,docsZh, anddocsDenseexports (matching TextInput's three-export coverage), verified viaastryx component <X> --zh/--dense.Test plan
form participationtests across the seven suites, asserting through realnew FormData(form): value inclusion, empty/unchecked exclusion,getAllordering for multi-value, range-mode double entry, and disabled exclusion (including the focusable-disableddisabledMessagecase for Switch/CheckboxInput/RadioList)typecheck,typecheck:docs, eslint on all seven directories,sync:exports:check— cleantype="hidden")