bug: Selects have variable width when placed inside container which leads to layout shifting when switching between options

[fng3r]

Reproduction URL (Required)

https://play.tailwindcss.com/Mqe5kM8zpd

What version of daisyUI are you using?

v5.5.5

Which browsers are you seeing the problem on?

Chrome, Edge

Describe your issue

Width of select element depends on current selected option when select is placed inside container without fixed length so when you switch between options it would shrink/expand to match width of the selected option. OS native selects doesn't have this issue since they always have fxied width which matches width of options dropdown

Demo

[github-actions[bot]]

Thank you @fng3r for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[pdanpdan]

Hello.

The default behavior of a select is to take (as much as possible) the width of the longest option.

A select with appearance: base-select has fluid width, so the width will not automatically adjust to the content of its options.

You should define a width if you want it fixed.

[saadeghi]

The default behavior of a select is to take (as much as possible) the width of the longest option.

That's true. however it would be nice if we can make it behave the same way native <select> or <input> is behaving (filling 100% width of parent) I will look into it…

[pdanpdan]

To fill 100% of the parent width is simple, the problem is that normal select (non base-select) does some internal computations base on the size of all options and chooses the widest one as the width of the non-open select. The result is that the width is stable. And I don't have any ideea how to reproduce this.