Skip to content

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

Open
@nkalpak

Description

@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)
    Screenshot from 2024-03-07 13-24-20

🤔 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

[email protected]

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    • Status

      🩺 To Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions