ComboBox - Sequential focus of two fields breaks popup

[ivanesik]

Provide a general summary of the issue here

If you trigger the popover of one ComboBox while the popover of another is open, the popover will only blinks, but does not show until you click it again.

🤔 Expected Behavior?

In state when first ComboBox is in focus with opened Popover, click on second ComboBox should close first one and open second (or just close first one), without blinks of popovers.

😯 Current Behavior

Popover of second/first ComboBox just blinks

Screen-Recording-2025-01-19-at-20.51.25.webm

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. On real phone/iPhone simulator/Android Simulator (not desktop browser with emulation) open https://react-spectrum.adobe.com/react-aria/ComboBox.html#selection (Selection example)
2. Trigger first one ComboBox by Trigger Button or typing in Input
3. Without selection value or another way of popover closing, trigger second one ComboBox
4. May repeat by triggering first one

Version

1.5.0

What browsers are you seeing the problem on?

Safari, Chrome

If other, please specify.

No response

What operating system are you using?

iOS 18.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Definitely not ideal. In the meantime, this can be mitigated by using a tray for the Combobox, such as the one we built for React Spectrum https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#selection

Then, this situation cannot happen. Also, the mobile experience is a lot easier to interact with, and there's a lot more space for available options.

[ivanesik]

Definitely not ideal. In the meantime, this can be mitigated by using a tray for the Combobox, such as the one we built for React Spectrum https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#selection

@snowystinger excuse me, I didn't quite understand how exactly to mitigate this problem. Your link has the same example that I posted in Issue and there this problem is reproduced on mobile devices
Can you add more details?

[snowystinger]

trim.16C1D9B1-B10B-4249-9111-D4761FB0E9C6.MOV

I don't see how to reproduce it in the link I shared. The tray takes over everything meaning that you can't click on the second combobox.

How are you reproducing it there?

[ivanesik]

I don't see how to reproduce it in the link I shared. The tray takes over everything meaning that you can't click on the second combobox.

Sorry, my mistake. I misread the link that it's on aria-spectrum, not react-aria. It's not perfect, but it's a way to get around this problem. Thanks

[ivanesik]

One more example for reproduction from react-aria-components, after value select in first ComboBox, second one has same problem, blinks and should be triggered twice.

ComboBox.webm