[SelectField] new SelectField component

[siriwatknp]

this PR is part of #21782

Summary of this PR

• create new component SelectField to separate select from TextField (detail is in the issue above)
• type value onChange follow Select component pattern (use generic since value can be string or array)
• expose multiple, native at the top of SelectField for ease of use.

<SelectField
  native
  multiple
  // I think this is better than SelectProps={{ native: true, multiple: true }}
  ...
>
  ...
</SelectField>

I feel SelectField has a better API than using <TextField select. @oliviertassinari

For removing select from TextField (breaking change), I think it can be another followup PR?

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes (experimental)

@material-ui/core: parsed: +0.45% , gzip: +0.44%

Generated by 🚫 dangerJS against 752cfe6

[m4theushw]

We have other issues that the SelectField should fix: #17353 (comment) and #25578. Basically, the idea is to not relay on Select because it uses a modal, which blocks any interaction on the rest of the page. We could use Popper for the menu positioning, like Autocomplete.

We need to discuss what is the plan to introduce this new component. We could first create a SelectField to solve the tree shaking issue #21782 (comment) and then create the Popper-based Select in another component, fixing the issues I mentioned earlier.

Regarding this PR: should it be released first in the lab or putting in the core is acceptable?

I don't want this change but it is generated from yarn docs:api, any idea to fix this?

The docs generator is linking the FilledInput page because docs/src/pages/components/select-fields/select-fields.md mentions that it's related. I don't think you need to remove it, because this component is used internally.

https://github.com/mui-org/material-ui/pull/26221/files#diff-4ea03166249a1151f0979d057a08b1139ca862a968ccda4eea87293e4c62e0ebR3

[oliviertassinari]

I would propose we do it iteratively (so move forward with this PR). The main value of this SelectField API (#21782) is to bundle InputLabel + Select + FormHelperText, allowing to have a good tree-shaking when importing the TextField (removing the select prop).

For the more ambitious fixes on the dropdown, IMHO, we could rewrite from scratch and start from the lab, things we could fix:

• a11y, it fails in may conditions
• performance, it fails with > 100 items
• scroll lock/positoning
• composition API
• unstyled API

I doubt we can make it in time for v5-beta.

[eps1lon]

I don't see any value in a new SelectField if it doesn't solve fundamental behavior and API issues with Select.

The main value of this SelectField API (#21782) is to bundle InputLabel + Select + FormHelperText, allowing to have a good tree-shaking when importing the TextField (removing the select prop).

As shown in the size-comparison, the proposed implementation does not adress this issue.

I would propose we do it iteratively (so move forward with this PR).

The new component is part of the core so there is not iterative approach possible.

[siriwatknp]

Close this issue to implement proper Select in the lab first

[oliviertassinari]

Thanks for the exploration!

[siriwatknp]

Thanks for the exploration!

An opportunity to understand at the codebase, can't missed it 😊