[6.x] Combobox 2.0

[duncanmcclean]

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:

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 🇩🇪.

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:

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"
  • Fixes Combobox focus issues when searchable="false" #13747
• Fixed focus clipping and z-index issue with the header site selector
  • Fixes Focus clipping in multisite dropdown #13704
• Opening the dropdown will now scroll to the selected option
• The search query is now cleared when closing the dropdown
• Search results are now returned in the original order, rather than fuzzsort's relevance order
  • Fixes Dropdown values no longer in ascending order whilst searching #14190
• Added an align prop to determine the alignment of the dropdown
• The non-searchable state now renders the <input>, but it's read-only
• Improved how we handle "taggable" comboboxes
  • Fixes Select field with no options but "allow additions" is on, does not work as expected #13900
• Fixed issue when selecting options in relationship typeahead
  • When you've partially typed an option and click it in the dropdown, the blur event would be triggered, causing the partially typed option to be added instead of the one you clicked.
• Added truncation to the selected option in the relationship fieldtype's select mode
  • Fixes Long text in a relationship field doesn't truncate #14241
• Fixed issue where pressing space in the ComboboxInput wouldn't actually give you a space.
  • This was due to the @keydown.open listener on the ComboboxTrigger. Fixed by preventing typing in the input from cancelling the input event.
  • Fixes Checkboxes - Default value with space #14389
• Added browser tests & documentation with Storybook
  • Closes Combobox docs missing docs#1819
• 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

[jasonvarga]

.

Claude be tripping