Material-components-web: Remove support for native select from MDC Select

[abhiomkar]

[Splaktar]

Can I ask for the reasoning behind this?

[jelbourn]

I'll chime in here and say that native select support is quite important for the Angular team. If removed, we would probably not use the MDC select primitives.

[dessant]

Native select was removed in version 4.0.0: https://github.com/material-components/material-components-web/pull/5113

I'm also surprised there's no reason shared for the removal.

[abhiomkar]

We removed native select support from MDC Select to remove complexities supporting two variants in a same component (Native Select + Enhanced Select). There is only one select version after refactor.

We want to focus on improving the user experience of select that is compliant with Material Design guidelines. But it is possible to create custom native select implementation using combination of mdc-notched-outline + mdc-floating-label.

[cintaccs]

@abhiomkar : do you take into account that selected values will no longer be submitted from forms? (as far as I can tell with the new implementation - there is no form field (used to be a hidden field) any longer). I don't fully understand how keeping the initial native select in the background (to be used on mobile devices) can be a big problem for complexity. I think the library should exactly take care of such complexity. My guess is that without it being a proper form candidate field - and without automatically switching for mobile use - most will not use the component - which is a petty as you put a lot of work into it + it has some ARIA benefits + all of the focus and keyboard handling. There are still some work though before that is perfected and lots of features for searching / big volume handling / load on use instead of at design time etc. to be dealt with...

Unfortunately the current new 4.0 implementation - breaking old functionality - forces anyone who want to use the latest improvements - to have a hard time. I think you will have many issues on this change.

[rukiadia]

I'm confusing.

There is no longer the function to synchronize a hidden input element.
That was implemented a year ago. https://github.com/material-components/material-components-web/pull/3986

In the current version, I don't know how should I post a selected value to my code on the server.
Could you show the best practices?

[austinw-fineart]

But you haven't even addressed enhanced select's disadvantages against native like #3927 and mobile UI.

[dessant]

A bit of history on this, the select element has switched between the native and enhanced versions in the past.

Here the enhanced select element is removed in favor of native select, breaking apps and making some use cases impossible: https://github.com/material-components/material-components-web/issues/2399

Developers are asking for enhanced select to be added back along with native select: https://github.com/material-components/material-components-web/issues/2552

For now, our designers are OK with the native version, because it provides much better accessibility and UX than the previous MDCSelect implementation.

Enhanced select is added back: https://github.com/material-components/material-components-web/pull/3949

Native select is removed during code refactoring, introducing a bunch of accessibility issues, and breaking apps again: https://github.com/material-components/material-components-web/pull/5113

Right now we are at the stage where developers are asking for native select to be added back.

It seems that because of all the difficult accessibility issues and missing native features of enhanced select, and the limited styling capabilities of native select, introducing two separate select components is the sensible solution, or at the very least, reverting the last change.

[cintaccs]

The problem reverting is that the new mdc-select without native IS actually very good! It doesn't move the mdc-list child around in the DOM any longer - and the selected item is a proper child item of the select etc.
IMO the Form Submit issue would be covered if the previous behaviour of writing the selected value also to a child input hidden element would be re-implemented in the newest mdc-select version (i.e. 4.0 version + embed <input=hidden value="<selected val>"> as it was previously.
That would solve the biggest problem (that selected values are not submitted).
Whether or not to additionally support the native select for mobile is something I think would be fantastic but is actually not related to the problem of enhanced select not setting a value.

[jalandis]

My team has spent a lot of effort to reduce the footprint of our application over the last year. The removal of native select forces us to include unnecessary JS and re-architect portions of our application reducing performance gains that we believe improve our customers experience.

I appreciate your work supporting this but I will be holding off upgrading this component in the hopes that this decision is reversed or an alternate native select is supported.

[jfeltkamp]

We use MDC-Web in the back end of Drupal 8, where jQuery is still used to determine form states in Ajax calls. Removing the support of the generic select element gives us great headaches. We dare not go along with this step and stick to version 3 because we are pretty sure that at some point you will come to the same conclusion that there must be at least legacy support. With great respect and appreciation for your great work, there are far too many question marks.

[mirceaciu]

bi bi ly blope, my app now is broke!

[abhiomkar]

Thank you all for the feedback! New issue is opened for mdc-select to support HTML forms #5428 More improvements are coming to mdc-select.

I'm closing this issue for now.