Open
Description
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:
- Without passing
shouldCloseOnBlur={false}
andallowsEmptyCollection={true}
to theComboBox
, theModal
immediately closes upon opening. This is fine except that neither of these props are in theComboBox
's interface - When passing these two props, the
Modal
now doesn't close, but theListBox
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?
shouldCloseOnBlur
andallowsEmptyCollection
should be in theComboBox
's props interface- The
ListBox
should render its items even when inside a modal
😯 Current Behavior
shouldCloseOnBlur
andallowsEmptyCollection
are not in the interface- The
ListBox
has an empty collection despite there being items passed to it
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
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
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
Labels
Type
Projects
Status
🩺 To Triage