Avoid emitting position change event unnecessarily and emit inside the zone

src/cdk/overlay/overlay-directives.spec.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, ViewChild} from '@angular/core';
+import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {
   ComponentFixture,
@@ -618,6 +618,18 @@ describe('Overlay directives', () => {
         .toBe(true);
     });
 
+    it('should emit the position change handler inside the zone', () => {
+      let callsInZone: boolean[] = [];
+
+      fixture.componentInstance.positionChangeHandler.and.callFake(() => {
+        callsInZone.push(NgZone.isInAngularZone());
+      });
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(callsInZone).toEqual([true]);
+    });
+
     it('should emit when attached', () => {
       expect(fixture.componentInstance.attachHandler).not.toHaveBeenCalled();
       fixture.componentInstance.isOpen = true;

src/cdk/overlay/overlay-directives.ts

@@ -16,6 +16,7 @@ import {
   Inject,
   InjectionToken,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   Optional,
@@ -116,6 +117,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _position: FlexibleConnectedPositionStrategy;
   private _scrollStrategyFactory: () => ScrollStrategy;
   private _disposeOnNavigation = false;
+  private _ngZone = inject(NgZone);
 
   /** Origin for the connected overlay. */
   @Input('cdkConnectedOverlayOrigin')
@@ -421,7 +423,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._positionSubscription = this._position.positionChanges
         .pipe(takeWhile(() => this.positionChange.observers.length > 0))
         .subscribe(position => {
-          this.positionChange.emit(position);
+          this._ngZone.run(() => this.positionChange.emit(position));
 
           if (this.positionChange.observers.length === 0) {
             this._positionSubscription.unsubscribe();

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -115,6 +115,9 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   /** The last position to have been calculated as the best fit position. */
   private _lastPosition: ConnectedPosition | null;
 
+  /** The last calculated scroll visibility. Only tracked  */
+  private _lastScrollVisibility: ScrollingVisibility | null;
+
   /** Subject that emits whenever the position changes. */
   private readonly _positionChanges = new Subject<ConnectedOverlayPositionChange>();
 
@@ -710,18 +713,28 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
       this._addPanelClasses(position.panelClass);
     }
 
-    // Save the last connected position in case the position needs to be re-calculated.
-    this._lastPosition = position;
-
     // Notify that the position has been changed along with its change properties.
     // We only emit if we've got any subscriptions, because the scroll visibility
     // calculations can be somewhat expensive.
     if (this._positionChanges.observers.length) {
-      const scrollableViewProperties = this._getScrollVisibility();
-      const changeEvent = new ConnectedOverlayPositionChange(position, scrollableViewProperties);
-      this._positionChanges.next(changeEvent);
+      const scrollVisibility = this._getScrollVisibility();
+
+      // We're recalculating on scroll, but we only want to emit if anything
+      // changed since downstream code might be hitting the `NgZone`.
+      if (
+        position !== this._lastPosition ||
+        !this._lastScrollVisibility ||
+        !compareScrollVisibility(this._lastScrollVisibility, scrollVisibility)
+      ) {
+        const changeEvent = new ConnectedOverlayPositionChange(position, scrollVisibility);
+        this._positionChanges.next(changeEvent);
+      }
+
+      this._lastScrollVisibility = scrollVisibility;
     }
 
+    // Save the last connected position in case the position needs to be re-calculated.
+    this._lastPosition = position;
     this._isInitialRender = false;
   }
 
@@ -1289,6 +1302,20 @@ function getRoundedBoundingClientRect(clientRect: Dimensions): Dimensions {
   };
 }
 
+/** Returns whether two `ScrollingVisibility` objects are identical. */
+function compareScrollVisibility(a: ScrollingVisibility, b: ScrollingVisibility): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  return (
+    a.isOriginClipped === b.isOriginClipped &&
+    a.isOriginOutsideView === b.isOriginOutsideView &&
+    a.isOverlayClipped === b.isOverlayClipped &&
+    a.isOverlayOutsideView === b.isOverlayOutsideView
+  );
+}
+
 export const STANDARD_DROPDOWN_BELOW_POSITIONS: ConnectedPosition[] = [
   {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
   {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'},