-
Notifications
You must be signed in to change notification settings - Fork 1.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
Ensure ComboboxInput
does not sync while you are still typing
#3259
Merged
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
While you are typing, we should not sync the value with the `<input>` because otherwise it would override your changes. The moment you close the Combobox (by selecting an option, clicking outside, pressing escape or tabbing away) we can mark the component as not typing anymore. Once you are not typing anymore, then we can re-sync the input with the given value.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
I'm a little sad that we have to hoist this state but am happy it's less code :D |
thecrypticace
requested changes
May 31, 2024
packages/@headlessui-react/src/components/combobox/combobox.tsx
Outdated
Show resolved
Hide resolved
This was referenced Jul 13, 2024
This was referenced Jul 27, 2024
This was referenced Aug 15, 2024
This was referenced Aug 29, 2024
This was referenced Sep 6, 2024
This was referenced Sep 13, 2024
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 issue where the
ComboboxInput
would sync the value based on thedisplayValue
way too early and losing the value you just typed.Previously, we didn't sync the value when you are still typing in the input. If you stopped typing for a bit, then we marked that you are not typing anymore and synced the input again.
The issue with this is that if you are waiting for a network request after searching then the
Combobox
thinks you are done with typing (because you are physically not typing anymore). Due to re-renders triggered by API calls finishing triggering state changes, we would sync the input again because at that point theisTyping
is set to false. This resulted in losing your search query and re-syncing the input.To solve this, we don't rely on a delay to indicate whether you are done typing or not. Instead, we lifted the state up and the moment you start typing we mark that you are typing. We only mark as "not typing" when you:
Combobox
componentComboboxInput
Fixes: #3184