fix(material-experimental/mdc-form-field): missing styles for native select controls (#19140)

With the initial implementation of the MDC-based form-field we
added support for `matInput`, but it looks like the styles
for the native select were missing. This currently means that
the select might show undesired focus indiciation or that
the select is slightly inset due to the native appearance.

Author: devversion

src/material-experimental/mdc-form-field/BUILD.bazel

@@ -82,6 +82,7 @@ sass_library(
     name = "form_field_partials",
     srcs = [
         "_form-field-focus-overlay.scss",
+        "_form-field-native-select.scss",
         "_form-field-sizing.scss",
         "_form-field-subscript.scss",
         "_mdc-text-field-structure-overrides.scss",

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -0,0 +1,90 @@
+@import '../../cdk/a11y/a11y';
+
+// Width of the Material Design form-field select arrow.
+$mat-form-field-select-arrow-width: 10px;
+// Height of the Material Design form-field select arrow.
+$mat-form-field-select-arrow-height: 5px;
+// Horizontal padding that needs to be applied to the native select in an form-field so
+// that the absolute positioned arrow does not overlap the select content.
+$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
+
+// Mixin that creates styles for native select controls in a form-field.
+@mixin _mat-form-field-native-select() {
+  // Remove the native select down arrow and ensure that the native appearance
+  // does not conflict with the form-field. e.g. Focus indication of the native
+  // select is undesired since we handle focus as part of the form-field.
+  select.mat-mdc-input-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    background-color: transparent;
+    display: inline-flex;
+    box-sizing: border-box;
+
+    // Hides the default arrow native selects.
+    &::-ms-expand {
+      display: none;
+    }
+
+    // By default the cursor does not change when hovering over a select. We want to
+    // change this for non-disabled select elements so that it's more obvious that the
+    // control can be clicked.
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+
+    // As a part of its user agent styling, IE11 has a blue box inside each focused `select`
+    // element which we have to reset. Note that this needs to be in its own selector, because
+    // having it together with another one will cause other browsers to ignore it.
+    &::-ms-value {
+      // We need to reset the `color` as well, because IE sets it to white.
+      color: inherit;
+      background: none;
+
+      // IE and Edge in high contrast mode reset the color for a focused select to the same color
+      // as the background, however this causes it blend in because we've reset the `background`
+      // above. We have to add a more specific selector in order to ensure that it gets the
+      // `color` from our theme instead.
+      @include cdk-high-contrast(active, off) {
+        .mat-focused & {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  // Native select elements with the `matInput` directive should have Material Design
+  // styling. This means that we add an arrow to the form-field that is based on the
+  // Material Design specification. We achieve this by adding a pseudo element to the
+  // form-field infix.
+  .mat-mdc-form-field-type-mat-native-select {
+    .mat-mdc-form-field-infix::after {
+      content: '';
+      width: 0;
+      height: 0;
+      border-left: ($mat-form-field-select-arrow-width / 2) solid transparent;
+      border-right: ($mat-form-field-select-arrow-width / 2) solid transparent;
+      border-top: $mat-form-field-select-arrow-height solid;
+      position: absolute;
+      top: 50%;
+      right: 0;
+
+      // Make the arrow non-clickable so the user can click on the form control under it.
+      pointer-events: none;
+
+      [dir='rtl'] & {
+        right: auto;
+        left: 0;
+      }
+    }
+
+    // Add padding on the end of the native select so that the content does not
+    // overlap with the Material Design arrow.
+    .mat-mdc-input-element {
+      padding-right: $mat-form-field-select-horizontal-end-padding;
+      [dir='rtl'] & {
+        padding-right: 0;
+        padding-left: $mat-form-field-select-horizontal-end-padding;
+      }
+    }
+  }
+}

src/material-experimental/mdc-form-field/form-field.scss

@@ -1,10 +1,11 @@
 @import '@material/textfield/mixins.import';
 
-@import 'form-field-sizing';
-@import 'form-field-subscript';
-@import 'form-field-focus-overlay';
-@import 'mdc-text-field-textarea-overrides';
-@import 'mdc-text-field-structure-overrides';
+@import './form-field-sizing';
+@import './form-field-subscript';
+@import './form-field-focus-overlay';
+@import './form-field-native-select';
+@import './mdc-text-field-textarea-overrides';
+@import './mdc-text-field-structure-overrides';
 
 // Base styles for MDC text-field, notched-outline, floating label and line-ripple.
 @include mdc-text-field-without-ripple($query: $mat-base-styles-without-animation-query);
@@ -16,9 +17,10 @@
 @include _mat-mdc-text-field-textarea-overrides();
 @include _mat-mdc-text-field-structure-overrides();
 
-// Include the subscript and focus-overlay styles.
+// Include the subscript, focus-overlay and native select styles.
 @include _mat-form-field-subscript();
 @include _mat-form-field-focus-overlay();
+@include _mat-form-field-native-select();
 
 // Host element of the form-field. It contains the mdc-text-field wrapper
 // and the subscript wrapper.