Material-components-web: MDC Select - no longer form input compatible

[kfranqueiro]

Firstly, sorry for unwittingly causing trouble with this one. 😓 We initially removed the CSS-only variant to reduce the amount of code that would shift as we continued with design work, but clearly overlooked a crucial use case in doing so.

We had a discussion today about how to reinstate interop with native HTML forms in some form today, and we want to bring our designers up to speed and have a discussion with them in case it affects their guidance regarding drop-down inputs on the web.

In the interim, if you need a MDC Select's value to be present in an HTML form submission, I would suggest listening to the MDCSelect:change event and copying the select instance's value into the value of a hidden input element.

[micdalco]

Also consider that native select provides faster keyboard access to long select lists with almost every modern browser for free.
After opening the select drop down menu you can start typing the item you are searching for and get it selected in a moment.
This is a lost feature in the 0.30.0 version.

[aaronhudon]

@kfranqueiro @micdalco I think this is a critical issue. Form inputs are still paramount to classic web development, and the <select> is not obsolete. The MDC team really needs to restore support for this control.

[moog16]

@aaronhudon we agree we need to address this issue. We've been looking to add a hidden input with the select, which will hold the select's value. On form submit the input's value will be posted and mimic a native select.

[nikolov-tmw]

In case someone is looking for an immediate solution, this is what I did:

1. I added the following code at the end of the mdc-select markup(before closing </div>):

<input type="hidden" name="input_name" value="input_value" class="my_mdc-select__value" />

1. I added the following code to my JS(make sure it runs on page load after the DOM has loaded):

document.querySelectorAll( '[data-mdc-auto-init="MDCSelect"]' ).forEach( function( sel ) {
    sel.My_MDCSelect__Value = sel.querySelector('input.my_mdc-select__value');
    if ( null !== sel.My_MDCSelect__Value ) {
        sel.addEventListener( 'MDCSelect:change', function( a ) {
            if ( sel.MDCSelect ) {
                sel.My_MDCSelect__Value.value = sel.MDCSelect.value;
            }
        } );
    }
} );

Essentially I'm adding a hidden input inside of the select menu markup. Then automatically hook to the MDCSelect:change event on any selects(that will be auto-initialized) on the current page in order to update the value of that hidden input. Obviously this won't work if you're dynamically creating/destroying select menus, but it should be a good enough starting point to figure out the rest.

[aaronhudon]

@nikolov-tmw thanks for sharing, suggestion: rename mdc-select__value to something that doesn't have a name that looks like an official MDC class. My convention has been prefixing with an underscore

[nikolov-tmw]

@aaronhudon good point - I just figured to follow suit. Updated the sample code above. I do plan on switching to the official implementation whenever it comes out :slightly_smiling_face:

[nerg4l]

I think the native CSS element got a better UX on mobile devices

[williamernest]

Thanks for all the input. We've talked with design and decided to revert back to using the <select> element and native dropdown.
References: #2399

[kfranqueiro]

We've resolved #2399 with #2462, so I think we can close this now. Sorry for the long turn-around on this.