`<selectmenu>` `min-inline-size` defaults and styles

[argyleink]

the current <select> element takes on the inline-size of it's longest <option> text. This makes it impossible to fit nicely inline with other content (unless the longest option is selected). I'm currently a fan that <selectmenu> (by default) takes on the length of the selected <option>. It's "shrink wrapped" which helps it fit into places nicely.

If a <selectmenu> was to ship with inline styles via the UA stylesheet, I'd hope it's easy to override so the current shrink wrap behavior can continue to be achieved. TLDR; please keep the current fitting behavior, as it's already easy to override as an author:

selectmenu [slot=button] {
  min-inline-size: 20ch;
}

Here's a couple demo's that would have benefited from a shrink wrapped <select> style option:

• https://codepen.io/argyleink/pen/PobZPyN
• https://codepen.io/argyleink/pen/oNxbNzy
• https://codepen.io/argyleink/pen/NWbWxrZ/7a019f5c0f46fa9a50e1c077e2b9e5c6 (the hit area here is too much because it's the width of the the longest length unit)
• https://codepen.io/argyleink/pen/vYNwbgM (writing mode can have a bunch of wasted space)
• https://codepen.io/argyleink/pen/dyWMrbe
• https://codepen.io/argyleink/pen/KKeVGXq/9a4429f31fe8639421243fdf156a14b7

[scottaohara]

agreed that if it's decided to apply a min width to the selectmenu based on its longest child option, that this must be overridable.

I personally think it should default to the min-width rather than adjust based on the current value, but I wouldn't argue hard for that if evidence shows that the adjusting width as the default is more desirable and that devs dont' mind having to specify widths with CSS for the instances where they don't want the control to auto adjust.

[gregwhitworth]

This will need to be tackled when we define the default UA styles

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[argyleink]

solved via field-sizing: content https://developer.chrome.com/docs/css-ui/css-field-sizing