fix(combobox): close popover on outside click when menuTrigger=focus#10087
Open
Gdhanush-13 wants to merge 1 commit into
Open
fix(combobox): close popover on outside click when menuTrigger=focus#10087Gdhanush-13 wants to merge 1 commit into
Gdhanush-13 wants to merge 1 commit into
Conversation
Re-add useInteractOutside to useComboBox to handle closing the combobox popover when clicking outside (e.g. on a modal overlay). The ComboBox popover is non-modal so isDismissable is false in useOverlay, which means useOverlay's useInteractOutside does not handle outside clicks for it. Additionally, track when the menu was closed by an outside interaction to prevent menuTrigger='focus' from immediately reopening the popover when focus is programmatically returned to the input (e.g. after a modal overlay dismiss). Fixes adobe#10074
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
1 participant
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.
Closes #10074
Problem
When rendering a ComboBox with
menuTrigger="focus"inside a modal/dialog, clicking the ModalOverlay does not close the open ComboBox popover.This regressed in #9768 which removed
useInteractOutsidefromuseComboBox. The ComboBox popover is non-modal (isDismissableis false), souseOverlay'suseInteractOutsidedoes not handle outside clicks for it.Fix
Re-add
useInteractOutsidetouseComboBoxto explicitly close the popover when clicking outside the combobox (clicks on the button/input are excluded).Prevent focus-return reopen: With
menuTrigger="focus", when an overlay dismisses and programmatically returns focus to the input, the combobox would immediately reopen. A ref (closedByInteractOutsideRef) tracks when the menu was closed by an outside interaction. If this flag is set whenonFocusfires, the popover is closed again viastate.setOpen(false)to prevent the reopen.Test Instructions
menuTrigger="focus"inside a Dialog/ModalChecklist