ComboBox inside of a Popover doesn't close when clicked outside of the Popover

[tilpoe]

Provide a general summary of the issue here

I don't know if this is a bug or expected behaviour but i noticed, that if you have a ComboBox inside of a Popover, you can only close it by clicking outside, when the click still is inside of the parent Popover. If you click anywhere else on the screen, the ComboBox will stay opened. When you check this behaviour on a Select component, it works as expected (or at least expected from me) - the Select dropdown closes as soon as you click anywhere outside of it.

🤔 Expected Behavior?

If a ComboBox is inside of a Popover, it should still close as soon as one clicks anywhere outside of it. It works like that for the select component.

😯 Current Behavior

If a ComboBox is inside of a Popover, it only closes if your "outside click" is still inside of the parent popover.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/quirky-architecture-nndhrz

1. Click on "Open Me" - a popover will open.
2. Open the select dropdown and click (a) outside of the dropdown, but still inside the parent popover -> the dropdown will close (b) outside of the dropdown and outside of the parent popover -> the dropdown will also close (expected behaviour)
3. Open the combobox dropdown and click (a) outside of the dropdown, but still inside the parent popover -> the dropdown will close (b) outside of the dropdown and outside of the parent popover -> the dropdown will not close

Version

1.0.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Mac OS 13.2.1 (22D68)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Oh interesting, so the reason for this bug is that the Combobox is considered a nonModal since focus remains in the field which means we won't close it like a typical overlay when clicking/interacting outside of it via

react-spectrum/packages/@react-aria/overlays/src/usePopover.ts

Line 89 in c3a4d63

isDismissable: !isNonModal,

. Instead we rely on blurring away from the input field here:

react-spectrum/packages/@react-aria/combobox/src/useComboBox.ts

Line 169 in c3a4d63

state.setFocused(false);

which confirms the combobox selection if any and closes the menu:

react-spectrum/packages/@react-stately/combobox/src/useComboBoxState.ts

Line 329 in c3a4d63

commitValue();

. However, with the ComboBox being within a open Popover, clicks outside the Popover will be intercepted by a underlay, resulting in focus not moving away from the ComboBox's input.

Not entirely sure the best way we should go about addressing this, perhaps we could track overlays that are nonModals in useOverlay and close them in the case an outside interaction is detected by a lower level overlay element:

react-spectrum/packages/@react-aria/overlays/src/useOverlay.ts

Lines 105 to 109 in c3a4d63

	if (visibleOverlays[visibleOverlays.length - 1] === ref) {
	e.stopPropagation();
	e.preventDefault();
	}
	onHide();

?

[LFDanLu]

Note for whoever picks this up in the future: this also happens with RSP ComboBox within a dialog as well

[sookmax]

@LFDanLu Hey I think I had a similar discussion with @snowystinger in #5338.

[LFDanLu]

Thanks for bringing up that up, it is indeed the same issue. I'll close this one favor of that one!