Select Component does not work correctly on mobile devices and in certain cases it does not display well on desktop.

[Mateozmaldonado17]

Describe the bug

When I click on a select this on a cell phone / desktop it completely exits the screen and does not have a defined overflow, also on a cell phone it does not show the NATIVE List.

To Reproduce

Steps to reproduce the behavior:

1. Create some native component and put many menu-items on it.
2. Open it from a computer and check that its height goes off the screen.
3. Open it on a cell phone and you will see that it leaves the screen and does not show the native list of the operating systems either.

Screenshots

[claviska]

When I click on a select this on a cell phone / desktop it completely exits the screen and does not have a defined overflow

Good catch. I'm surprised this hasn't come up before.

also on a cell phone it does not show the NATIVE List.

This is by design. Select controls allow for rich content in menu items (e.g. prefixes, suffixes, arbitrary HTML, etc.) so showing a system control on certain devices won't always convey the same information to the user.

However, you can still use <select> should you prefer that functionality.

[Mateozmaldonado17]

Buddy and how do I get the same shoelance design?

[claviska]

You can use the design tokens to write custom styles that will stay consistent with your theme.

https://codepen.io/claviska/pen/WNOLLWm?editors=0100