**Feature:** Not anchored select

[stereobooster]

Summary

Add maxWidth param to limit width of select dropdown.

Related issue

N/A

To be tested

Me

• [x] No error or warning in the console on localhost:6060

Tester 1

• [ ] Things look good on the demo.

Tester 2

• [ ] Things look good on the demo.

[stereobooster]

From my POV option behaves as expected. It says maxWidth and indeed the size of select does not exceed maxWidth (yes select takes less space than dropdown, but this was the case before).

[mpotomin]

The benefit of linking the width of the drop-down to the Select would be that users of the component won't need to change any code at the place where the component is applied, just upgrade the library version and not care of anything else.

With the suggested solution users will need to set additional prop value of maxWidth, and additionally set up the ref and state hooks to update that prop in place on container resize. So this solution comes with a lot of extra complexity for users, that should rather be incapsulated within the component itself.

The width of the context menu should be linked to the width of the Select box. The fact that it isn't now is a bug that needs to be fixed, not the API that should be extended to cover up the fact the bug exists in the first place.

[stereobooster]

The width of the context menu should be linked to the width of the Select box. The fact that it isn't now is a bug that needs to be fixed, not the API that should be extended to cover up the fact the bug exists in the first place.

It depends. The Select can be small because it is in place (it should respect given space), but dropdown can be bigger because it is above the content. The only issue is we need to make sure it is not hidden by the side of the screen and doesn't make things jump.

But we can as well take the route where width of select == width of dorpdown.

Side note: fullWidth doesn't work for Select as far as I can see

[mpotomin]

It depends. The Select can be small because it is in place (it should respect given space), but dropdown can be bigger because it is above the content. The only issue is we need to make sure it is not hidden by the side of the screen and doesn't make things jump.

In this case the solution would be to make the drop-down alight with the given boundary and expand to the left side instead of the right side if there is more available space there.

To illustrate expand to the right:

versus expand to the left if the right boundary does not allow expanding to the left:

[mpotomin]

In our case the drop-down as a child of the select, it always has the same amount of width as the parent Select has

[stereobooster]

Native select for comparison

[mpotomin]

Native select for comparison

In this case the drop-down is indeed on top of everything as it is native and it will align with the window/screen width and and won't influence the page flow.

But we can as well take the route where width of select == width of dorpdown.

I'd love to have that for the Select. It would fix the page flow issues without adding extra complexity for the component usage. How hard would it be to implement?

[stereobooster]

@mpotomin how about this one?

[mpotomin]

Would be nice to see how this solution would work in the context of out real use case in contiamo-ui. Waiting for the PR pre view build...