fix(select): inconsistent openedChange event dispatched between browsers (#11461)

Author: crisbeto

src/lib/select/select.html

@@ -35,7 +35,7 @@
     class="mat-select-panel {{ _getPanelTheme() }}"
     [ngClass]="panelClass"
     [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
-    (@transformPanel.done)="_onPanelDone()"
+    (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
     [style.transformOrigin]="_transformOrigin"
     [class.mat-select-panel-done-animating]="_panelDoneAnimating"
     [style.font-size.px]="_triggerFontSize"

src/lib/select/select.ts

@@ -75,7 +75,15 @@ import {
 } from '@angular/material/core';
 import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {defer, merge, Observable, Subject} from 'rxjs';
-import {filter, map, startWith, switchMap, take, takeUntil} from 'rxjs/operators';
+import {
+  filter,
+  map,
+  startWith,
+  switchMap,
+  take,
+  takeUntil,
+  distinctUntilChanged,
+} from 'rxjs/operators';
 import {matSelectAnimations} from './select-animations';
 import {
   getMatSelectDynamicMultipleError,
@@ -264,6 +272,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   /** Whether the panel's animation is done. */
   _panelDoneAnimating: boolean = false;
 
+  /** Emits when the panel element is finished transforming in. */
+  _panelDoneAnimatingStream = new Subject<string>();
+
   /** Strategy that will be used to handle scrolling while the select panel is open. */
   _scrollStrategy = this._scrollStrategyFactory();
 
@@ -470,6 +481,23 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   ngOnInit() {
     this._selectionModel = new SelectionModel<MatOption>(this.multiple, undefined, false);
     this.stateChanges.next();
+
+    // We need `distinctUntilChanged` here, because some browsers will
+    // fire the animation end event twice for the same animation. See:
+    // https://github.com/angular/angular/issues/24084
+    this._panelDoneAnimatingStream
+      .pipe(distinctUntilChanged(), takeUntil(this._destroy))
+      .subscribe(() => {
+        if (this.panelOpen) {
+          this._scrollTop = 0;
+          this.openedChange.emit(true);
+        } else {
+          this.openedChange.emit(false);
+          this._panelDoneAnimating = false;
+          this.overlayDir.offsetX = 0;
+          this._changeDetectorRef.markForCheck();
+        }
+      });
   }
 
   ngAfterContentInit() {
@@ -674,22 +702,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
   }
 
-  /**
-   * When the panel element is finished transforming in (though not fading in), it
-   * emits an event and focuses an option if the panel is open.
-   */
-  _onPanelDone(): void {
-    if (this.panelOpen) {
-      this._scrollTop = 0;
-      this.openedChange.emit(true);
-    } else {
-      this.openedChange.emit(false);
-      this._panelDoneAnimating = false;
-      this.overlayDir.offsetX = 0;
-      this._changeDetectorRef.markForCheck();
-    }
-  }
-
   /**
    * When the panel content is done fading in, the _panelDoneAnimating property is
    * set so the proper class can be added to the panel.