fix(form-field): native select label floating incorrectly when invalid value is set

Fixes the label for a form field with a native select floating when it isn't supposed to, if a value that isn't in the options list is assigned.

Author: crisbeto

src/lib/input/input.spec.ts

@@ -643,6 +643,21 @@ describe('MatInput without forms', () => {
     expect(formFieldEl.classList).toContain('mat-form-field-should-float');
   }));
 
+  it('should not float the label if the selectedIndex is negative', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelect);
+    fixture.detectChanges();
+
+    const formFieldEl = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+    const selectEl: HTMLSelectElement = formFieldEl.querySelector('select');
+
+    expect(formFieldEl.classList).toContain('mat-form-field-should-float');
+
+    selectEl.selectedIndex = -1;
+    fixture.detectChanges();
+
+    expect(formFieldEl.classList).not.toContain('mat-form-field-should-float');
+  }));
+
   it('should not float labels when select has no value, no option label, ' +
       'no option innerHtml', fakeAsync(() => {
     const fixture = createComponent(MatInputSelectWithNoLabelNoValue);

src/lib/input/input.ts

@@ -384,8 +384,10 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
       // overlapping the label with the options.
       const selectElement = this._elementRef.nativeElement as HTMLSelectElement;
 
-      return selectElement.multiple || !this.empty || !!selectElement.options[0].label ||
-          this.focused;
+      // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
+      // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
+      return this.focused || selectElement.multiple || !this.empty ||
+             (selectElement.selectedIndex > -1 && !!selectElement.options[0].label);
     } else {
       return this.focused || !this.empty;
     }