Combobox popover is getting closed automatically when there is a nested popover in it.

[SoloDev45]

I’m encountering an issue with nested popovers inside ComboBox.

Use Case : I want to open a secondary (nested) popover by clicking a menu button which will be in option.

Issue Details

With RACInput

When the combobox is developed using the Input component from react-aria-components, then when I open a nested popover by clicking on a menu option which is in the option, then the parent component which shows the listbox items is getting closed automatically. Which is not expected

With a HTML input

When the Combobox is developed using html input, then when i open the nested popover the list box items popover is not getting closed and working as expected. But when i try to close the list box items popover after closing the nested popover then the list box items popover is not gettgin closed it remains in open state.

Below is the relevant implementation for this scenario.

https://codesandbox.io/p/devbox/vite-react-tailwindcss-forked-fwydfj?file=%2Fsrc%2Fcomponents%2FInput%2FInput.tsx%3A46%2C1

I want to keep the combobox popover open even after nested popover is opened , I have many usecases with this behavior, Can you help me to achieve this.

[SoloDev45]

@devongovett can you help me with this

[snowystinger]

Please see the warning in this section of the ListBox docs https://react-aria.adobe.com/ListBox#text-slots
You'll want to use a different approach, possibly something more like Autocomplete with a GridList https://react-aria.adobe.com/Autocomplete inside a Popover with a TagList outside.

You'll notice some other issues with the approach you have right now if you try to use keyboard only navigation to add a new item or remove an existing one.