[Select] Render Select component value holder as real native select

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, the <Select> component uses an <input> as a value holder for all its value, for both simple and multiple/Chip list. Although the native property can be used currently, it does not match the expected MUI design.

The new system should keep the current design and having a hidden native <select> at the same time. A new attribute should be added to indicate that we want to use a select as value holder.

Another idea is to improve the current native property so it stills keep the design of MUI while still rendering a native select.

Examples 🌈

<Select
    select
>
..
</Select>

Motivation 🔦

With the current system, things get more even more complicated when we render a multiple select or a chip select and. When the whole FormData is submitted to the server, the input send a comma seperated ID 1,2,3,4 instead of a real array. Therefore rendering a real select match better the expectation of the developper.

Start by tracing the Select component's current input value holder and the existing native property. Compare the requested select value-holder behavior with the example and FormData motivation; done means the MUI-styled component can use a real native select while multiple values submit as an array rather than a comma-separated string.