fix: issue with autocomplete input blur#3690
Open
nicosommi wants to merge 3 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
nicosommi
changed the title
Contributor
|
Size Change: +145 B (+0.02%) Total Size: 829 kB 📦 View Changed
ℹ️ View Unchanged
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #3690 +/- ##
==========================================
- Coverage 93.69% 93.64% -0.05%
==========================================
Files 199 199
Lines 4486 4502 +16
Branches 1763 1775 +12
==========================================
+ Hits 4203 4216 +13
- Misses 256 258 +2
- Partials 27 28 +1
🚀 New features to boost your workflow:
|
sirineJ
reviewed
Jun 11, 2026
|
|
||
| if (!movingInside) { | ||
| syncSearchOnDismiss(); | ||
| } |
Contributor
There was a problem hiding this comment.
Thank you for catching this issue, @nicosommi 👏
I believe there could be a simpler way to address it. If we fire a change event here (like we do in the onComboboxClear callback) I believe we could achieve the same thing:
Suggested change
| } | |
| } | |
| if (!value && searchText !== '') { | |
| changeInputValue(comboboxRef.current, ''); | |
| } |
Member
Author
There was a problem hiding this comment.
Good call on reusing changeInputValue for the clear-to-empty path — adopted that in syncSearchOnDismiss for !value && searchText !== '' (and multi-select filter reset), same as onComboboxClear.
Kept setSearchText for the preselected-value restore path because firing a change to the label would debounce onSearch(label) and leave client-filtered options stale again. Still emit onSearch('') explicitly so consumers get the full list on reopen.
movingInside + syncSearchOnDismiss on Escape/modal close remain for Tab-close and immersive dismiss.
sirineJ
reviewed
Jul 8, 2026
| } else if (searchText) { | ||
| changeInputValue(comboboxRef.current, ''); | ||
| } | ||
| onSearch?.(''); |
Contributor
There was a problem hiding this comment.
I noticed that whenever we close the suggestion box, we always call onSearch('') , which actually makes sense. How about moving it into the closeResults method ?
| const onComboboxClear = useCallback( | ||
| (event: ClickEvent) => { | ||
| changeInputValue(comboboxRef.current, ''); | ||
| onSearch?.(''); |
Contributor
There was a problem hiding this comment.
I think onClear is enough to allow consumers to do the necessary (reset suggestions) I think calling onSearch here is superfluous
| setSearchText(''); | ||
| changeInputValue(presentationFieldRef.current, ''); | ||
| setIsOpen(true); | ||
| onSearch?.(''); |
| useClickOutside([inputWrapperRef, refs.floating], handleClickOutside); | ||
|
|
||
| useEscapeKey(closeResults, isOpen); | ||
| useEscapeKey(syncSearchOnDismiss, isOpen); |
Contributor
There was a problem hiding this comment.
I think closeResults (with onSearch('') ) will do the trick here
| onClick: !readOnly && !disabled ? onComboboxClick : undefined, | ||
| readOnly, | ||
| disabled, | ||
| onBlur: allowNewItems ? undefined : restoreValue, |
Contributor
There was a problem hiding this comment.
Suggested change
| onBlur: allowNewItems ? props.onBlur : restoreValue, |
| className={classes.modal} | ||
| contentClassName={classes['modal-content']} | ||
| onClose={closeResults} | ||
| onClose={syncSearchOnDismiss} |
Contributor
There was a problem hiding this comment.
I think closeResults (with onSearch('') ) will do the trick here
Comment on lines
+252
to
+264
| const syncSearchOnDismiss = useCallback(() => { | ||
| if (!Array.isArray(value)) { | ||
| if (!value && searchText !== '') { | ||
| changeInputValue(comboboxRef.current, ''); | ||
| } else if (searchText !== value?.value) { | ||
| setSearchText(value?.label ?? ''); | ||
| if (isImmersive) { | ||
| setPresentationFieldValue(value?.label ?? ''); | ||
| } | ||
| } | ||
| } else if (searchText) { | ||
| changeInputValue(comboboxRef.current, ''); | ||
| } |
Contributor
There was a problem hiding this comment.
with the suggestions below, this can be simplified
Suggested change
| const syncSearchOnDismiss = useCallback(() => { | |
| if (!Array.isArray(value)) { | |
| if (!value && searchText !== '') { | |
| changeInputValue(comboboxRef.current, ''); | |
| } else if (searchText !== value?.value) { | |
| setSearchText(value?.label ?? ''); | |
| if (isImmersive) { | |
| setPresentationFieldValue(value?.label ?? ''); | |
| } | |
| } | |
| } else if (searchText) { | |
| changeInputValue(comboboxRef.current, ''); | |
| } | |
| const syncSearchOnDismiss = useCallback(() => { | |
| if (!Array.isArray(value) && searchText !== value?.value) { | |
| setSearchText(value?.label ?? ''); | |
| } |
| ## How to use | ||
|
|
||
| - Use the `onSearch` prop to update the list of options as the user types. You can optionally set the `minQueryLength` prop to delay this behavior until a minimum number of characters has been typed. | ||
| - Use the `onSearch` prop to update the list of options as the user types. You can optionally set the `minQueryLength` prop to delay this behavior until a minimum number of characters has been typed. When the component resets its search text internally (for example after blur without a selection, clear, or closing the immersive modal), it emits `onSearch` with an empty string so consumers can restore the full option list. |
Contributor
There was a problem hiding this comment.
Suggested change
| - Use the `onSearch` prop to update the list of options as the user types. You can optionally set the `minQueryLength` prop to delay this behavior until a minimum number of characters has been typed. When the component resets its search text internally (for example after blur without a selection, clear, or closing the immersive modal), it emits `onSearch` with an empty string so consumers can restore the full option list. | |
| - Use the `onSearch` prop to update the list of options as the user types. You can optionally set the `minQueryLength` prop to delay this behavior until a minimum number of characters has been typed. Whenever the suggestion box is closed, the `onSearch` callback is fired with an empty string, allowing consumers to reset the suggestion list. |
Comment on lines
+5
to
+12
| **AutocompleteInput:** emit `onSearch` when the search text is reset internally (on | ||
| blur-restore, clear, and immersive modal dismiss), so consumers that derive `options` | ||
| from `onSearch` no longer show a stale, previously-filtered list after the field is | ||
| dismissed without a selection. | ||
|
|
||
| **AutocompleteInput:** close the results list when focus leaves the field (e.g. via | ||
| `Tab`), not only on pointer click-outside, so keyboard users don't leave an orphaned | ||
| open listbox. |
Contributor
There was a problem hiding this comment.
It is best to create one changeset file per change. It helps with the visibility and discovery of the different changes.
Suggested change
| **AutocompleteInput:** emit `onSearch` when the search text is reset internally (on | |
| blur-restore, clear, and immersive modal dismiss), so consumers that derive `options` | |
| from `onSearch` no longer show a stale, previously-filtered list after the field is | |
| dismissed without a selection. | |
| **AutocompleteInput:** close the results list when focus leaves the field (e.g. via | |
| `Tab`), not only on pointer click-outside, so keyboard users don't leave an orphaned | |
| open listbox. | |
| Updated the AutocompleteInput to fire the `onSearch` callback whenever the suggestion box is closed, allowing consumers to reset the suggestion list. |
In a separate changeset file:
Updated the AutocompleteInput focus management to close the suggestion box whenever the focus leaves the elements of the component (combobox or suggestion box).
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
No ticket yet
How to reproduce the issue
Purpose
Fix the issue mentioned above, spotted here
Approach and changes
Definition of done