Fix incorrect active option in the Listbox/Combobox component
#1264
Conversation
This file contains 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
The React code had a bug in the Listbox and Combobox components where it incorrectly made the first selected value the active value. The first selected option should be the active option when you open the listbox. However when you already had the component in an `open` state, hovered over a non-selected item and them left the option by moving it to the body then the first selected option became the active one again. This made sense because we used a `useEffect` in each option to make it the active one if it was also selected. Since every component re-renders, code got called and the bug arises. Now, instead we moved the logic to make it the active option to the reducer logic. We will check it when we register an option and doesn't have an active option index yet or when we open the Listbox/Combobox. This should also solve the strange scrolling behaviour where the options scroll up if you have more options than you display.
|
This pull request is being automatically deployed with Vercel (learn more). headlessui-react – ./packages/playground-react🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/7fNnPwD4FsNtkDZ8kR4mKBpR5k51 headlessui-vue – ./packages/playground-vue🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/21cR74QjMSYSgpn8piArTzYmeDUR |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This pr fixes an incorrect
activeoptionThe React code had a bug in the Listbox and Combobox components where it incorrectly made the first selected value the active value.
The first selected option should be the active option when you open the listbox. However when you already had the component in an
openstate, hovered over a non-selected item and them left the option by moving it to the body then the first selected option became the active one again.This made sense because we used a
useEffectin each option to make it the active one if it was also selected. Since every component re-renders, code got called and the bug arises.Now, instead we moved the logic to make it the active option to the reducer logic. We will check it when we register an option and doesn't have an active option index yet or when we open the Listbox/Combobox.
This should also solve the strange scrolling behaviour where the options scroll up if you have more options than you display.