You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently, I'm using Headless UI in the Chakra UI context. And I want it to integrate a headless combobox with the useFormControl hook that manages invalid, disabled, and other states and the htmlFor and id mapping between label and input.
Currently, id passed into HeadlessUI Combobox.Input from useFormControl gets overridden by Headless UI default generated IDs breaking this connection.
Here is the example how it looks.
Above is regular input from Chakra. Below is a wrapper around Headless UI Combobox.
<FormControlHorizontal><FormLabelHorizontal><Iconas={Lightbulb}/><FormLabelText>Idea</FormLabelText></FormLabelHorizontal><FormInputContainer><Inputplaceholder="Add a idea"variant="rest"/><FormErrorMessage>Please add idea</FormErrorMessage></FormInputContainer></FormControlHorizontal><FormControlHorizontalisInvalidisRequired><FormLabelHorizontal><Iconas={Lightbulb}/><FormLabelText>Idea</FormLabelText></FormLabelHorizontal><FormInputContainer><AutocompleteSelectisNullablevalue={selected}onChange={setSelected}displayValue={(it)=>it??""}onQueryChange={onQueryChange}onButtonClick={onButtonClick}placeholder="Add an idea"variant="rest">{isEmptyResult ? (<AutocompleteSelectNotFound/>) : (options.map((it)=>(<BasicAutocompleteSelectOptionvalue={it}key={it}>{it}</BasicAutocompleteSelectOption>)))}</AutocompleteSelect><FormErrorMessage>Pleaseaddidea</FormErrorMessage>
</FormInputContainer></FormControlHorizontal>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Currently, I'm using Headless UI in the Chakra UI context. And I want it to integrate a headless combobox with the
useFormControl
hook that manages invalid, disabled, and other states and the htmlFor and id mapping between label and input.Currently, id passed into HeadlessUI Combobox.Input from useFormControl gets overridden by Headless UI default generated IDs breaking this connection.
Here is the example how it looks.
Above is regular input from Chakra. Below is a wrapper around Headless UI Combobox.
Beta Was this translation helpful? Give feedback.
All reactions