ListBox always empty when rendered inside a ComboBox with a Modal instead of a Popover
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
When rendering something like this
```tsx
{/* Note the Modal here instead of Popover */}
One
```
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](https://codesandbox.io/p/sandbox/upbeat-https-jr6qj5?file=%2Fsrc%2FApp.tsx%3A7%2C18)
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_
Contributor guide
Research direction
Start with the linked CodeSandbox and the ComboBox example from the react-aria-components documentation; compare the behavior when ComboBox.tsx:43 uses Modal versus Popover. Investigate why the two props are missing from the ComboBox interface and why the static ListBox collection is empty inside Modal. Done means both props are accepted and the ListBox items render and the Modal closes correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100