-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integrate Listbox (Select) with react hook form - onBlur issue #2936
Comments
You can add onBlur event to "Listbox.Options". <Listbox
value={selectedPerson}
onChange={setSelectedPerson}
onMouseDown={(event) => {
event.preventDefault();
}}>
<Listbox.Button>{selectedPerson.name}</Listbox.Button>
<Listbox.Options onBlur={onBlur}>
{people.map((person) => (
<Listbox.Option
key={person.id}
value={person}
>
{person.name}
</Listbox.Option>
))}
</Listbox.Options>
</Listbox> |
@hyphast that seems to work if you're using the mouse but not the keyboard. It seems to work better to just wrap the entire Listbox with a div that has an onBlur prop:
Or alternatively you could put the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
^1.7.18"
What browser are you using?
Chrome
Describe your issue
Hey, first of all thank for this amazing libaray. This is my first time of using it. I am facing the issue where react-hook-form onBlur event calling not properly. I added onBlur event on the root "ListBox" element but it didn't work as well as in nested components. onBlur event call soon as i click on the select box and thats weird.
bandicam.2024-01-22.04-29-54-022.mp4
The text was updated successfully, but these errors were encountered: