mui
[combobox] Popup closes automatically when list is filtered in `multiple`
Bug report
Current behavior
In the multiple case, the popup stays open when items are toggled. However, the popup will close after each item toggle if the list happens to be filtered.
Expected behavior
I think it's generally better for the popup to stay open regardless of whether the list is filtered.
Reproducible example
As seen in the official example:
https://github.com/user-attachments/assets/acec37df-010b-48e3-88c4-0c4627105e48
Base UI version
1.0.0-beta.4
Which browser are you using?
Chrome
Which OS are you using?
Mac OS
It's reproducible on main as well: https://master--base-ui.netlify.app/react/components/combobox#multiple-select
This was "intentional" since when you've filtered the list, clearing the input after selection would cause all the items to show again which might be disorienting for the user due to layout shift. I am open to changing the behavior, though
clearing the input after selection would cause all the items to show again
Could it retain the input value after selection? I may want to make multiple selections based on one "input filter", e.g. type "Star Wars" and pick multiple movies
@mj12albert I think that UX flow is worse as a default but it could be useful..
FWIW our behavior matches Material UI Autocomplete, though theirs closes even when not filtering
Ok yeah I see that. Keeping the input value after selection is great when wanting to select multiple Star Wars movies, but slower when you want to select multiple unrelated movies. There may be cases where you can know beforehand what the more common interaction is, but not always.
I also find it more palatable to keep the input value after selection when the input is placed inside the popup, completely separate from the chips. It's a lot more awkward to do so when the input is placed alongside the chips, because the illusion is that the input value "morphs" into a chip when an item is selected.
Yeah it seems pretty contextual based on the use-case/dataset. It seems quite easy to not auto-close and keep the input value by using onOpenChange: https://stackblitz.com/edit/bcocshwo-kkp2dff4?file=src%2FApp.tsx
It wouldn't be as easy doing it the other way round