From d5352d369096002cb4c07c75dbfb554845a7c85f Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 27 Nov 2018 16:45:18 +0100
Subject: [PATCH] fix(form-field): error when native select has no options
 (#14102)

Fixes an error being thrown when there's a native `select` without any options inside a `mat-form-field`.

Fixes #14101.
---
 src/lib/input/input.spec.ts | 14 ++++++++++++++
 src/lib/input/input.ts      |  9 ++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 5e5c272a4df..1935f556c69 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -671,6 +671,11 @@ describe('MatInput without forms', () => {
     expect(formFieldEl.classList).toContain('mat-form-field-should-float');
   }));
 
+  it('should not throw if a native select does not have options', fakeAsync(() => {
+    const fixture = createComponent(MatInputSelectWithoutOptions);
+    expect(() => fixture.detectChanges()).not.toThrow();
+  }));
+
   it('should never float the label when floatLabel is set to false', fakeAsync(() => {
     let fixture = createComponent(MatInputWithDynamicLabel);
 
@@ -1933,6 +1938,15 @@ class MatInputSelectWithInnerHtml {}
 })
 class MatInputWithCustomAccessor {}
 
+@Component({
+  template: `
+    <mat-form-field>
+      <select matNativeControl>
+      </select>
+    </mat-form-field>`
+})
+class MatInputSelectWithoutOptions {}
+
 
 /** Custom component that never has a value. Used for testing the `MAT_INPUT_VALUE_ACCESSOR`. */
 @Directive({
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index e383ac5a076..545f9fe8be5 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -383,9 +383,10 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
       // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
       // overlapping the label with the options.
       const selectElement = this._elementRef.nativeElement as HTMLSelectElement;
+      const firstOption: HTMLOptionElement | undefined = selectElement.options[0];
 
-      return selectElement.multiple || !this.empty || !!selectElement.options[0].label ||
-          this.focused;
+      return selectElement.multiple || !this.empty || this.focused ||
+          !!(firstOption && firstOption.label);
     } else {
       return this.focused || !this.empty;
     }
@@ -395,7 +396,9 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    * Implemented as part of MatFormFieldControl.
    * @docs-private
    */
-  setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); }
+  setDescribedByIds(ids: string[]) {
+    this._ariaDescribedby = ids.join(' ');
+  }
 
   /**
    * Implemented as part of MatFormFieldControl.