fix(material/select): error if selected value is accessed too early (#23378)

Fixes that the select throws if the `selected` value is accessed before everything is initialized.

Fixes #23371.

(cherry picked from commit a41ac2b)

Author: crisbeto

src/material-experimental/mdc-select/select.spec.ts

@@ -2709,11 +2709,34 @@ expect(panel.scrollTop)
   describe(`when the select's value is accessed on initialization`, () => {
     beforeEach(waitForAsync(() => configureMatSelectTestingModule([SelectEarlyAccessSibling])));
 
-    it('should not throw when trying to access the selected value on init', fakeAsync(() => {
-      expect(() => {
-        TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
-      }).not.toThrow();
-    }));
+    it('should not throw when trying to access the selected value on init in the view',
+      fakeAsync(() => {
+        expect(() => {
+          TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
+        }).not.toThrow();
+      }));
+
+    it('should not throw when reading selected value programmatically in single selection mode',
+      fakeAsync(() => {
+        expect(() => {
+          const fixture = TestBed.createComponent(SelectEarlyAccessSibling);
+          const select = fixture.debugElement.query(By.directive(MatSelect)).componentInstance;
+          // We're checking that accessing the getter won't throw.
+          select.multiple = false;
+          return select.selected;
+        }).not.toThrow();
+      }));
+
+    it('should not throw when reading selected value programmatically in multi selection mode',
+      fakeAsync(() => {
+        expect(() => {
+          const fixture = TestBed.createComponent(SelectEarlyAccessSibling);
+          const select = fixture.debugElement.query(By.directive(MatSelect)).componentInstance;
+          // We're checking that accessing the getter won't throw.
+          select.multiple = true;
+          return select.selected;
+        }).not.toThrow();
+      }));
   });
 
   describe('with ngIf and mat-label', () => {

src/material/select/select.spec.ts

@@ -2776,11 +2776,34 @@ describe('MatSelect', () => {
   describe(`when the select's value is accessed on initialization`, () => {
     beforeEach(waitForAsync(() => configureMatSelectTestingModule([SelectEarlyAccessSibling])));
 
-    it('should not throw when trying to access the selected value on init', fakeAsync(() => {
-      expect(() => {
-        TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
-      }).not.toThrow();
-    }));
+    it('should not throw when trying to access the selected value on init in the view',
+      fakeAsync(() => {
+        expect(() => {
+          TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
+        }).not.toThrow();
+      }));
+
+    it('should not throw when reading selected value programmatically in single selection mode',
+      fakeAsync(() => {
+        expect(() => {
+          const fixture = TestBed.createComponent(SelectEarlyAccessSibling);
+          const select = fixture.debugElement.query(By.directive(MatSelect)).componentInstance;
+          // We're checking that accessing the getter won't throw.
+          select.multiple = false;
+          return select.selected;
+        }).not.toThrow();
+      }));
+
+    it('should not throw when reading selected value programmatically in multi selection mode',
+      fakeAsync(() => {
+        expect(() => {
+          const fixture = TestBed.createComponent(SelectEarlyAccessSibling);
+          const select = fixture.debugElement.query(By.directive(MatSelect)).componentInstance;
+          // We're checking that accessing the getter won't throw.
+          select.multiple = true;
+          return select.selected;
+        }).not.toThrow();
+      }));
   });
 
   describe('with ngIf and mat-label', () => {

src/material/select/select.ts

@@ -624,7 +624,8 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
 
   /** The currently selected option. */
   get selected(): MatOption | MatOption[] {
-    return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0];
+    return this.multiple ? (this._selectionModel?.selected || []) :
+                            this._selectionModel?.selected[0];
   }
 
   /** The value displayed in the trigger. */