Keep focus inside of the <ComboboxInput /> component
#3073
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
The `mousedown` event happens before the `focus` event. When we `e.preventDefault()` in this listener, the `focus` event will not fire. This also means that the focus is not lost on the actual `input` component which in turn means that we can maintain the selection / cursor position inside the `input`. We still use the `refocusInput()` as a fallback in case something else goes wrong.
Now that we use the `mousedown` event instead of the `click` event, we have to make sure that we handle the `enter` and `space` keys explicitly. This used to be covered by the `click` event, but not for the `mousedown` event.
…oboxButton` We go to the last one on `ArrownUp`, but we forgot to do this on `ArrowDown`.
Not related to this PR, but noticed it and fixed it anyway.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
While we are typing, the flag can remain true. But once we stop typing, the `nextFrame` handler will kick in and set it to `false` again. It currently behaves as a debounce-like function such that the `nextFrame` callbacks are cancelled once a new event is fired.
This allows us to keep re-adding dispose functions and only register the callbacks once. Ideally we can use a `Set`, but we also want to remove a single callback if the callback is disposed on its own instead of disposing the whole group. For this we do require an `idx` which is not available in a `Set` unless you are looping over all disposable functions.
reinink
reviewed
Apr 3, 2024
| @@ -1077,8 +1078,21 @@ function InputFn< | |||
| }) | |||
| }) | |||
|
|
|||
| let dd = useDisposables() | |||
There was a problem hiding this comment.
The dd variable here is confusing to me — what does it mean? I know we typically use d for disposables, so is it just because you have two disposables in this case? Wondering if we can come up with a better name here?
There was a problem hiding this comment.
Yep we already had d but that had a different use case. To solve this, I created a useFrameDebounce() hook (we can improve this name if we want). But now we can do this instead:
reinink
reviewed
Apr 3, 2024
packages/@headlessui-react/src/components/combobox/combobox.tsx
Outdated
Show resolved
Hide resolved
reinink
reviewed
Apr 3, 2024
packages/@headlessui-react/src/components/combobox/combobox.tsx
Outdated
Show resolved
Hide resolved
reinink
reviewed
Apr 3, 2024
reinink
reviewed
Apr 3, 2024
packages/@headlessui-react/src/components/combobox/combobox.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
reinink
reviewed
Apr 3, 2024
reinink
approved these changes
Apr 3, 2024
This was referenced May 28, 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 improves the UX of the
Comboboxcomponent.When you open the combobox via the button or when you select an option from the list, then the focus is briefly moved to the button or the option respectively and then we restore the focus to the input itself.
We improved this behaviour in #3065 where we ensure that the selection and cursor position inside of the input will be preserved when the focus is moved around as-if nothing happened.
However, this can result in a tiny selection flicker (because when the focus is moved to the button or the option, the selection is removed).
This PR improves on that behaviour by using the
mousedownevent instead of theclickevent. If we useevent.preventDefault()in themousedownevent, then the focus will not be moved to the button or the option and the focus remains in the input. This also means that the selection remains in the input.We now use the
mousedownevent, which means that we have to do a tiny bit more work compared to theclickevent. For example:mousedownevent will also be triggered when using the right mouse button (the click event doesn't do this)spaceorenterkeydown events on the button — this was previously handled by theclickevent as well.Screen.Recording.2024-04-02.at.00.10.59.mov