adobe / adobe/react-spectrum

RAC Select Type-ahead not working as per ARIA guidelines

Open
#8,919 3 comments 0 reactions 0 assignees View on GitHub
bug
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 using the Select component with keyboard type-ahead, pressing a character key correctly moves focus to the first item starting with that character. However, pressing the same character again (after a pause) does not move focus to the next matching item. Instead, nothing happens.

### 🤔 Expected Behavior?

Focus should move to the next item starting with B (Blackberry and then cycle to Blueberry), etc.

### 😯 Current Behavior

Focus remains on Banana and does not advance.

### 💁 Possible Solution

_No response_

### 🔦 Context

https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

> Type-ahead is recommended for all listboxes, especially those with more than seven options:
>
> Type a character: focus moves to the next item with a name that starts with the typed character.
> Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

### 🖥️ Steps to Reproduce

1. Render a Select with multiple options starting with the same character, e.g.:
- Banana
- Blackberry
- Blueberry
2. Focus on the Select and press B once.
- Focus correctly moves to Banana.
3. Wait a moment (so it doesn’t count as a multi-character search).
4. Press B again.

https://codesandbox.io/p/devbox/eloquent-greider-x8nkqn?workspaceId=ws_Mmtf2BXRGBZxWbCjAhmHY5

### Version

`@adobe/react-spectrum` - **3.44.2**
`react-aria-components` - **1.12.2**

### What browsers are you seeing the problem on?

Firefox, Chrome, Safari

### If other, please specify.

_No response_

### What operating system are you using?

MacOS 26

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.