Should dropdowns hug its contents or should they be fixed?

Question

When creating a dropdown filter, you can control the size of the dropdown by the size of the placeholder, therefore its inicial width.

When the user selects an option, should I refresh the dropdown width to accommodate the text option or should I maintain its initial width and elipse the overflown text?

Visually I prefer the dropdown hugging its text/placeholder, but the drawback is that long options will mess up the layout after the selected option. On the other hand, if I set a minimum and maximum width, it seems that I'm wasting too much space.

I'd be happy to also hear any opinion about steppers and text input sizes..

Answer 1

I'd say it depends on what the dropdown is for.

In your case, you mentioned it is being used as a filter. Filters need to be highly visible at all times and hence, their sizing should be dynamic.

I understand the concern about it messing up the layout so make sure that your filter container is also dynamic. Let the size of that container increase vertically and the filters move to the next row. Maybe make the container collapsible or have it become hidden when the user scrolls down if vertical real estate is a problem. Basically, the layout would need to accommodate for the size and number of filters.

In case of a form, the dropdowns should always be of a fixed length because there, the forms layout is the key factor as it needs to be reused allowing muscle memory to kick in.