ListBox always empty when rendered inside a ComboBox with a Modal instead of a Popover

[nkalpak]

Provide a general summary of the issue here

When rendering something like this

  <ComboBox>
    {/* Note the Modal here instead of Popover */}
    <Modal>
      <ListBox>
        <ListBoxItem>One</ListBoxItem>
      </ListBox>
    </Modal>
  </ComboBox>

two issues arise:

1. Without passing shouldCloseOnBlur={false} and allowsEmptyCollection={true} to the ComboBox, the Modal immediately closes upon opening. This is fine except that neither of these props are in the ComboBox's interface
2. When passing these two props, the Modal now doesn't close, but the ListBox is empty, despite there being a static collection passed to it (see picture, the input is focused, modal is opened, but the listbox is empty)

🤔 Expected Behavior?

1. shouldCloseOnBlur and allowsEmptyCollection should be in the ComboBox's props interface
2. The ListBox should render its items even when inside a modal

😯 Current Behavior

1. shouldCloseOnBlur and allowsEmptyCollection are not in the interface
2. The ListBox has an empty collection despite there being items passed to it

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

CodeSandbox

The sandbox uses the ComboBox as per the example in the react-aria-components docs.

You can try removing one or both of shouldCloseOnBlur/allowsEmptyCollection to see the first issue. You can leave both to see the second issue. You can try replacing the Modal with Popover in ComboBox.tsx:43, to verify that it works with a Popover but not Modal.

Version

react-aria-components@1.1.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?

Ubuntu

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Doesn't look like I can access your CodeSandbox, perhaps due to permissions? As for using a ComboBox with a Modal, that isn't a supported use case, at least not yet. Internally, the ComboBox sends a variety of things that its internal aria hook uses such as refs and isNonModal via a context that Popover consumes which won't work with Modal. Accessibility wise, these are needed since we typically hide everything outside of a overlay from screen readers but ComboBox's dropdown is an exception here since focus remains in the input element at ALL times and thus the screen reader user needs to be able to interact with the input element AND the contents of the Popover.

This isn't setup to work with a Modal however, hence the blur that happens when focus moves from the input into the Modal, resulting in the ComboBox closing as you've noticed. I'll need to look into why the ListBox is empty even when you force the Modal to remain open, but ideally we'd want to support ComboBox + Modal as a whole since there will be a host of other issues other than that. To support this use case, I imagine we'd need to do something like RSP ComboBox does for its mobile case where it renders a Tray with a combobox inside of said Tray to get around the "hide all elements outside the Modal" problem.

[nkalpak]

I just updated the permissions on the sandbox, I guess now you need to make it public explicitly.

RSP ComboBox does for its mobile case where it renders a Tray with a combobox inside of said Tray

Yep, this is pretty much my use-case too. I want to use the Popover on desktop but a full width/height Modal on mobile.

[LFDanLu]

Gotcha, the team wants to set something up for in RAC for mobile Tray support so this will most likely be part of that effort. No ETA on that yet however.

[mehdibha]

I understand that Modal is not supported for Combobox, but why it's also the case for Select?

[snowystinger]

Linking the issue you created @mehdibha https://github.com/adobe/react-spectrum/discussions/6409 and I'll close out the discussion