adobe / adobe/react-spectrum

Select Listbox keeps taking focus when item is empty

Open
#9,803 3 comments 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.