Issue in the responsive SelectPicker, CheckPicker and all list for selection WIDTH.

[JuanCaCode]

What version of rsuite are you using?

5.53.1

What version of React are you using?

18.0.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

brave

Describe the Bug

I got a normal view for my SelectPicker like this:

When I select an item that its text is longer than the SelectPicker, this one goes widest:

To a Rapid fix, I have to set a fixed width, but this makes it not being responsive as I want and as it needs to be.

Expected Behavior

The width of the SelectPicker have to be fixed by its container. and respect that width. not getting it wider. like a width:100% behavior.

To Reproduce

No response

[simonguo]

Hi @JuanCaCode, try to add a block prop.

<SelectPicker block />

[JuanCaCode]

no, it doesn't work. This is my component code:

it still gets wider everytime I select a item longer than the SelectPicker width.

[simonguo]

Can you provide a codesandbox example to reproduce the problem?

[JuanCaCode]

I think I found out the core of the issue. This happens when I'm working with a grid or flex container. If you remove the grid display, I will work well. But most of people works with display grid or flex. and that happens.

https://codesandbox.io/p/sandbox/goofy-cookies-ht6724?file=%2Findex.js%3A24%2C7

[simonguo]

@JuanCaCode

[JuanCaCode]

My mistake, sorry. try now this one please: https://codesandbox.io/p/sandbox/goofy-cookies-ht6724?file=%2Findex.js