[combobox] Moving focus to a chip closes the popup and discards the typed filter
- 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
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