Scale width of vaadin-select according to the selected item

[danielvanmil]

Describe your motivation

Vaadin-select can be scaled with custom css properties:

• --vaadin-field-default-width
• --vaadin-select-text-field-width

Describe the solution you'd like

It would be nice when the select auto scales with width of the selected item when no static width is needed.

Describe alternatives you've considered

No response

Additional context

No response

[yuriy-fix]

Could be considered for other fields as well.

[danielvanmil]

any updates on this?

[jouni]

My prototype implementation for native input and select elements:

• https://jelements.netlify.app/prototypes/input-decorator/#auto-size
• https://github.com/jouni/j-elements/blob/master/src/components/InputDecorator.js#L103-L137

That said, it should be easier to implement this for <vaadin-select>, with just CSS.

[jouni]

Here’s the CSS that should get the result (assuming Vaadin 23.3 or later):

vaadin-select {
  --vaadin-field-default-width: auto;
}

vaadin-select-value-button {
  width: auto;
  /* Relying on the internal custom property to remove the overflow mask image */
  --_lumo-text-field-overflow-mask-image: none; 
}

[danielvanmil]

thanks @jouni! Any chance this "feature" will be added to the default Vaadin or might even become standard behavior?

[jouni]

I don't think we want to change the default behavior, not at least with v23 or v24. Could be considered for v25, but I wonder if it's worth the trouble. I would think a built-in variant (opt-in per instance) would be good enough.