adobe / adobe/react-spectrum

ComboBox - Scrolls to end of popup when typing

Open
#7,573 3 comments 0 reactions 0 assignees View on GitHub
ComboBox enhancement
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

In certain cases typing in an open ComboBox causes it to scroll to the end of the list.

![spectrum-combobox-scroll](https://github.com/user-attachments/assets/d5e33db6-fa57-4ddc-920a-1485596f47d9)

### 🤔 Expected Behavior?

I would expect the ComboBox would scroll to a more intuitive position while typing such as the beginning of the filtered list, the selected item, or no scrolling at all.

### 😯 Current Behavior

It currently scrolls to the end of the list in certain scenarios (see [codesandbox](https://codesandbox.io/p/sandbox/j8cpcy))

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

[Code sandbox example](https://codesandbox.io/p/sandbox/j8cpcy)

1. Open ComboBox
1. Manually scroll to selected "Display 91" item
1. Backspace the 1 in the search box resulting in "Display 9"
1. Scroll jumps to end of CombobBox

### Version

3.38.0

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

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and reproduce the ComboBox behavior in Chrome using the listed steps, then trace the ComboBox implementation and its filtering and scroll handling. Compare the result after changing “Display 91” to “Display 9” with the intended behavior; done means typing no longer jumps the popup to the end of the list.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.