Select Listbox keeps taking focus when item is empty
- 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
I'm building something like `ComboBox` with `allowsCustomValue`, but I'd like to dynamically add options to `Select` instead, so the layout is following
```tsx
empty}>
{item => }
{}
```
### 🤔 Expected Behavior?
I could input normally in the text input
### 😯 Current Behavior
When item is empty, `Listbox` keeps taking focus so it's impossible to input anything in the text field bellow.
### 💁 Possible Solution
_No response_
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/clever-framework-97fl4t
### Version
latest
### What browsers are you seeing the problem on?
Firefox
### If other, please specify.
_No response_
### What operating system are you using?
Linux
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction and trace the Select, ListBox, and Input focus behavior in the TypeScript source. Reproduce it in Firefox with an empty ListBox, then identify the focus loop; done when the text input remains usable while the collection is empty and existing behavior is preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100