<selectmenu> tests

For context, visit the open-ui site.

This page contains a list of select input-style use cases that typically require custom components today. The new <selectmenu> (working name) in Chromium allows for far more customization and flexibility. The goal for this page is attempt to re-create these use cases with the selectmenu element instead.

Make sure to use a recent Canary version of a Chromium browser, and turn on the "Experimental Web Platform features" flag in about:flags.

Each section below contains a demo, and a summary of the limitations with the current implementation.

Vertically aligned options (google calendar)

Requirements: align the popup vertically so that the selected option matches the selected-value's position, and animate opening.

Using JS, we can re-position the popup when it appears so that the selected option is vertically aligned with the selected-value. But the browser handles cases when there isn't enough space for the popup, in which case it moves it above the button. The JS code doesn't account for this and the popup ends up too high. We either need more JS to account for this. Or have a way to dis-engage the browser's auto placement.


Requirements: display a text field in the popup that allows to filter options.

We can't style the select based on its open state. Needed to tweak the border-radius and border-bottom. The open property exists, but that requires JS for something that feels like it should be doable with CSS only.

There doesn't seem to be a way to know if the popup is opened below or above the button. Same here, JS is needed.

When options get hidden, we need JS code to take them out of the arrow navigation. Tabbing through them can be done correctly with tabindex=-1 on the hidden ones. But up/down still cycles through all options, even when disabled. So I decided to remove/recreate options instead.
Related: using both tab and up/down arrows leads to bugs, pressing down after having used tab starts again from the last position reached by the previous down key press.


Requirements: Allow selecting multiple options from the list, displaying them in the button. This is currently out of scope for the selectmenu work, but adding a bit of JS to do this would at least have the a11y benefits.

No big limitations here. JS and CSS allow to achieve this pretty easily. It would be good to be able to leave the popup open though.

    Gitpod's account switcher

    Requirements: option subtext, custom toggle button, icon next to last option.

    Small limitation: the default button/selected-value parts were fine for this example, but if we don't replace them, then the default disclosure icon appears, and there doesn't seem to be a way to style it. So we have to replace both parts to be able to do this.

    Scroll indicators

    Requirements: limit the max-height of the popup and provide scrolling (see Select by modulz).

    It seems like max-height is not supported on the popup element, a nested element is needed.

    GitHub's issue filter

    Requirements: icons for some options, inline layout for some options, groups of options.

    The new selectmenu makes it really easy to style options with different layouts (vertical list vs. horizontal buttons). The limitation here is not being able to style optgroup's labels. If this was possible, we'd use this for the Sort by and Most reactions headers.

    Sort by
    Most reactions

    Dribbble's filter

    Requirements: custom styling and animations, icons for some options.

    The new selectmenu makes it possible to display custom icons next to options, and fully style the button and popup to match the design. We need a way to easily display the custom icons in the selected-value part though (see this issue).

    Word's color select

    Requirements: Mixing a grid of colors and a list of action items. Displaying a split button (click the A to set the color, click the arrow to open the drop-down).

    No problems with the implementation here. Selectmenu makes this easy.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.