adobe / adobe/react-spectrum

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

Open
#6,021 13 comments 0 reactions 0 assignees View on GitHub
enhancement Overlays Picker RAC
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)
![Screenshot from 2024-03-07 13-24-20](https://github.com/adobe/react-spectrum/assets/57584132/b436e003-d7f1-415f-b2c4-005a9c684b7c)

### 🤔 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.