refactor(material/select): use afterNextRender to wait for options

Author: mmalerba

src/material/select/select.ts

@@ -8,8 +8,8 @@
 
 import {
   ActiveDescendantKeyManager,
-  LiveAnnouncer,
   addAriaReferencedId,
+  LiveAnnouncer,
   removeAriaReferencedId,
 } from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
@@ -34,7 +34,10 @@ import {
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentInit,
+  afterNextRender,
+  AfterRenderPhase,
   Attribute,
+  booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
@@ -45,9 +48,12 @@ import {
   ElementRef,
   EventEmitter,
   Inject,
+  inject,
   InjectionToken,
+  Injector,
   Input,
   NgZone,
+  numberAttribute,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -58,9 +64,6 @@ import {
   SimpleChanges,
   ViewChild,
   ViewEncapsulation,
-  booleanAttribute,
-  inject,
-  numberAttribute,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -71,17 +74,17 @@ import {
   Validators,
 } from '@angular/forms';
 import {
+  _countGroupLabelsBeforeOption,
   _ErrorStateTracker,
+  _getOptionScrollPosition,
   ErrorStateMatcher,
+  MAT_OPTGROUP,
+  MAT_OPTION_PARENT_COMPONENT,
   MatOptgroup,
   MatOption,
   MatOptionSelectionChange,
-  MAT_OPTGROUP,
-  MAT_OPTION_PARENT_COMPONENT,
-  _countGroupLabelsBeforeOption,
-  _getOptionScrollPosition,
 } from '@angular/material/core';
-import {MatFormField, MatFormFieldControl, MAT_FORM_FIELD} from '@angular/material/form-field';
+import {MAT_FORM_FIELD, MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {defer, merge, Observable, Subject} from 'rxjs';
 import {
   distinctUntilChanged,
@@ -553,10 +556,18 @@ export class MatSelect
       );
     }
 
-    return this._ngZone.onStable.pipe(
-      take(1),
-      switchMap(() => this.optionSelectionChanges),
-    );
+    return new Observable(subscriber => {
+      afterNextRender(
+        () => {
+          subscriber.next();
+          subscriber.complete();
+        },
+        {
+          injector: this._injector,
+          phase: AfterRenderPhase.Read,
+        },
+      );
+    }).pipe(switchMap(() => this.optionSelectionChanges));
   }) as Observable<MatOptionSelectionChange>;
 
   /** Event emitted when the select panel has been toggled. */
@@ -584,10 +595,16 @@ export class MatSelect
    */
   @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>();
 
+  private _injector = inject(Injector);
+
   constructor(
     protected _viewportRuler: ViewportRuler,
     protected _changeDetectorRef: ChangeDetectorRef,
-    protected _ngZone: NgZone,
+    /**
+     * @deprecated Unused param, will be removed.
+     * @breaking-change 19.0.0
+     */
+    _unusedNgZone: NgZone,
     defaultErrorStateMatcher: ErrorStateMatcher,
     readonly _elementRef: ElementRef,
     @Optional() private _dir: Directionality,

tools/public_api_guard/material/select.md

@@ -86,7 +86,8 @@ export { MatPrefix }
 
 // @public (undocumented)
 export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, MatFormFieldControl<any> {
-    constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, defaultErrorStateMatcher: ErrorStateMatcher, _elementRef: ElementRef, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer, _defaultOptions?: MatSelectConfig | undefined);
+    constructor(_viewportRuler: ViewportRuler, _changeDetectorRef: ChangeDetectorRef,
+    _unusedNgZone: NgZone, defaultErrorStateMatcher: ErrorStateMatcher, _elementRef: ElementRef, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, _parentFormField: MatFormField, ngControl: NgControl, tabIndex: string, scrollStrategyFactory: any, _liveAnnouncer: LiveAnnouncer, _defaultOptions?: MatSelectConfig | undefined);
     ariaLabel: string;
     ariaLabelledby: string;
     protected _canOpen(): boolean;
@@ -153,8 +154,6 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
-    // (undocumented)
-    protected _ngZone: NgZone;
     _onAttached(): void;
     _onBlur(): void;
     _onChange: (value: any) => void;