mui / mui/base-ui

[combobox] Moving focus to a chip closes the popup and discards the typed filter

Open
#5,547 1 comment 0 reactions 0 assignees View on GitHub
component: combobox status: waiting for maintainer
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Current behavior

In a multi-select combobox with chips, moving focus onto a chip closes the popup and throws away the filter text that was typed.

Steps, using the `async-multiple` demo pattern (`Combobox.Chips` containing chips plus `Combobox.Input`, in `multiple` mode):

1. Click the input — the popup opens.
2. Pick an item so a chip appears next to the input.
3. Type a few characters to filter the list, e.g. `ba`. The popup stays open and shows the matches.
4. Press `ArrowLeft` until the caret reaches the start of the text.
5. Press `ArrowLeft` once more — focus moves to the last chip.

At step 5 the popup closes, and the `ba` typed in step 3 is discarded. Reopening the popup shows an empty input.

Reaching the same chip with the mouse does not appear to behave the same way: a pointer press on a chip is explicitly treated as interacting *within* the field, while arrowing to it is treated as leaving the field.

## Expected behavior

Moving focus onto a chip is a normal part of using the field, so it should not discard work in progress. If a user is partway through narrowing a long list and reaches for a chip to remove a wrong pick, the filter text should still be there afterwards.

Note that closing the popup on chip focus does appear to be deliberate — there is a test covering it (`closes the popup when a chip receives focus`), So this is not a request to keep the popup open unconditionally; the surprising parts are the lost filter text.

## Reproducible example

## Base UI version

v1.7.0 (`master`)

## Which browser are you using?

## Which OS are you using?

Windows

## Which assistive tech are you using (if applicable)?

N/A

## Additional context

Noticed while working on #5539.

Contributor guide

Open the contributing guide

Research direction

Start with the Combobox.Chips and Combobox.Input handling used by the async-multiple demo, then run or read the existing test named “closes the popup when a chip receives focus.” Reproduce the ArrowLeft transition with a typed filter such as “ba”; done means the popup still closes as tested while the filter text remains available when the field is reopened.

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
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.