Sl-Select clipping content in the dropdown menu

[dsaniel]

Describe the bug

My sl-select menus are being set to the same size as the container which is causing the content to be clipped.

This seems to be happening here.

Not sure if this is a feature or a bug, but if it is a feature I was wondering if there's any way to disable it.

To Reproduce

Add a sl-select to a page and add different sized options, then make sure the select has no width or min-width so that it conforms to it's contents size, select the shortest entry and the open the menu again.

Screenshots

[claviska]

This is by design. The menu should be the same width by default. This is done with JavaScript because it's not possible to do it with pure CSS given the way the internals are structured.

However, you can target the menu's width like this:

sl-select::part(menu) {
  width: auto;
}

Unfortunately, the placement is currently top/bottom, which puts the menu in the center of the trigger and looks odd. It should be anchored to the top-start/bottom-start of the control, which would allow for this type of customization.

I've fixed that in 8b2c090, so this will be possible in the next release.

Result:

[dsaniel]

Awesome, thanks!