feat(Select): Support browser based autofill in <mat-select>

[philipwalton]

Feature Description

I recently noticed that the angular material select component does not work with browser based autofill. I would have expected something like this to work, but it doesn't:

<mat-select 
  formControlName="state"
  autocomplete="address-level1">
  ...
</mat-select>

Here's a demo site showing it not working: https://gorgeous-palmier-877897.netlify.app/

STR:

1. Visit https://gorgeous-palmier-877897.netlify.app/ in a browser where you have a US address stored
2. Click into the "Street Address" field, which should trigger the browser's autofill UI, and select an address
3. Notice how all of the fields populate except the state dropdown.

Many other component libraries support this feature by using a visually hidden <select> element that gets synchronized with the custom select component, and I believe it should be possible for <mat-select> to do the same.

Note: the code for the demo I linked above can be found here: https://bolt.new/~/sb1-mm4oni4x

Use Case

Form submissions that generate errors because they're not fully filled out are a top user frustration. One of the main reasons this happens is due to browser-based autofill not being able to fill out every field.