Skip to content

[6.x] Combobox 2.0#13843

Open
duncanmcclean wants to merge 25 commits into6.xfrom
combobox-2-0
Open

[6.x] Combobox 2.0#13843
duncanmcclean wants to merge 25 commits into6.xfrom
combobox-2-0

Conversation

@duncanmcclean
Copy link
Member

@duncanmcclean duncanmcclean commented Feb 6, 2026

This pull request overhauls the Combobox component to make it faster, more accessible, and less janky.

The current implementation grew slow and messy as we (mostly I) patched edge cases during alpha/beta. After researching how other component libraries handle certain things, I picked up some ideas for improving our own - and this PR is the result.

There's a lot of changes in this PR, so I've tried to list everything I can remember:

Dropdown width

The options dropdown was previously as wide as the longest option. This meant we needed to measure the options in JS (which impacted performance) and resulted in weirdly aligned dropdowns like this:

Pasted image 20260205111313 1

To keep things tidy, the dropdown is now fixed to the width of the trigger. This does, however, mean that long options may be truncated.

I've adjusted the widths of comboboxes in a few places to account for this after looking through the Control Panel in German 🇩🇪.

CleanShot 2026-02-06 at 14 36 01

I've also added an adaptiveWidth prop which lets you opt-in to the old behaviour where necessary. We use this in the site selector to handle options with varying lengths.

Closes #13615

Dropdown height & virtualization

Previously, the options dropdown would expand to fit the available space.

For example: if the combobox was at the top of the page, and it contained a lot of options, it'd take up a large chunk of the screen:

CleanShot 2026-02-06 at 14 57 23

As recommended by Reka, the dropdown now has a max height of 300px.

Adding a max-height has meant we're able to get rid of the hacky min-heights added in # #13489 to prevent squished options when resizing the viewport.

It also means that Reka's virtualizer works properly, allowing us to ditch our custom Scrollbar component and rely on the browser's scrollbar. 🎉

Other improvements

  • Fixed keyboard accessibility issues when searchable="false"
  • Opening the dropdown will now scroll to the selected option
  • The search query is now cleared when closing the dropdown
  • Added an align prop to determine the alignment of the dropdown
  • The non-searchable state now renders the <input>, but it's read-only
  • Added browser tests & documentation with Storybook
  • Updated the docs for the Select component so it more closely mirrors the Combobox docs
  • General tidy up of the component (sorry for the large diff! 😬)
  • Various accessibility improvements
  • A handful of minor UI fixes

duncanmcclean added a commit to statamic/docs that referenced this pull request Feb 6, 2026
it'll 404 until statamic/cms#13843 has been merged and tagged.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Combobox docs missing Combobox focus issues when searchable="false" Combobox performance

1 participant