Skip to content

Commit d5d8563

Browse files
committed
fix(cdk/overlay): run positionChange event inside the zone
Fixes that the `positionChange` event of the `CdkConnectedOverlay` directive was running outside the zone. Fixes #28568. (cherry picked from commit b513b50)
1 parent 67956e0 commit d5d8563

File tree

2 files changed

+16
-2
lines changed

2 files changed

+16
-2
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, ElementRef, ViewChild} from '@angular/core';
1+
import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
22
import {By} from '@angular/platform-browser';
33
import {
44
ComponentFixture,
@@ -618,6 +618,18 @@ describe('Overlay directives', () => {
618618
.toBe(true);
619619
});
620620

621+
it('should emit the position change handler inside the zone', () => {
622+
let callsInZone: boolean[] = [];
623+
624+
fixture.componentInstance.positionChangeHandler.and.callFake(() => {
625+
callsInZone.push(NgZone.isInAngularZone());
626+
});
627+
fixture.componentInstance.isOpen = true;
628+
fixture.detectChanges();
629+
630+
expect(callsInZone).toEqual([true]);
631+
});
632+
621633
it('should emit when attached', () => {
622634
expect(fixture.componentInstance.attachHandler).not.toHaveBeenCalled();
623635
fixture.componentInstance.isOpen = true;

src/cdk/overlay/overlay-directives.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
Inject,
1717
InjectionToken,
1818
Input,
19+
NgZone,
1920
OnChanges,
2021
OnDestroy,
2122
Optional,
@@ -116,6 +117,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
116117
private _position: FlexibleConnectedPositionStrategy;
117118
private _scrollStrategyFactory: () => ScrollStrategy;
118119
private _disposeOnNavigation = false;
120+
private _ngZone = inject(NgZone);
119121

120122
/** Origin for the connected overlay. */
121123
@Input('cdkConnectedOverlayOrigin')
@@ -421,7 +423,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
421423
this._positionSubscription = this._position.positionChanges
422424
.pipe(takeWhile(() => this.positionChange.observers.length > 0))
423425
.subscribe(position => {
424-
this.positionChange.emit(position);
426+
this._ngZone.run(() => this.positionChange.emit(position));
425427

426428
if (this.positionChange.observers.length === 0) {
427429
this._positionSubscription.unsubscribe();

0 commit comments

Comments
 (0)