Skip to content

Commit

Permalink
fix(cdk/overlay): skip trigger interactions in outside click event
Browse files Browse the repository at this point in the history
Adds some logic to skip the trigger when considering clicks outside of the overlay since filtering them is the most common case (e.g. we do it in some of our components) and can be annoying to deal with.

Fixes angular#28949.
  • Loading branch information
crisbeto committed May 14, 2024
1 parent 37958ef commit 68d7028
Showing 1 changed file with 26 additions and 6 deletions.
32 changes: 26 additions & 6 deletions src/cdk/overlay/overlay-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
booleanAttribute,
inject,
} from '@angular/core';
import {_getEventTarget} from '@angular/cdk/platform';
import {Subscription} from 'rxjs';
import {takeWhile} from 'rxjs/operators';
import {Overlay} from './overlay';
Expand Down Expand Up @@ -311,7 +312,12 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
});

this._overlayRef.outsidePointerEvents().subscribe((event: MouseEvent) => {
this.overlayOutsideClick.next(event);
const origin = this._getOriginElement();
const target = _getEventTarget(event) as Element | null;

if (!target || !origin || (origin !== target && !origin.contains(target))) {
this.overlayOutsideClick.next(event);
}
});
}

Expand Down Expand Up @@ -367,7 +373,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
}));

return positionStrategy
.setOrigin(this._getFlexibleConnectedPositionStrategyOrigin())
.setOrigin(this._getOrigin())
.withPositions(positions)
.withFlexibleDimensions(this.flexibleDimensions)
.withPush(this.push)
Expand All @@ -379,21 +385,35 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {

/** Returns the position strategy of the overlay to be set on the overlay config */
private _createPositionStrategy(): FlexibleConnectedPositionStrategy {
const strategy = this._overlay
.position()
.flexibleConnectedTo(this._getFlexibleConnectedPositionStrategyOrigin());
const strategy = this._overlay.position().flexibleConnectedTo(this._getOrigin());
this._updatePositionStrategy(strategy);
return strategy;
}

private _getFlexibleConnectedPositionStrategyOrigin(): FlexibleConnectedPositionStrategyOrigin {
private _getOrigin(): FlexibleConnectedPositionStrategyOrigin {
if (this.origin instanceof CdkOverlayOrigin) {
return this.origin.elementRef;
} else {
return this.origin;
}
}

private _getOriginElement(): Element | null {
if (this.origin instanceof CdkOverlayOrigin) {
return this.origin.elementRef.nativeElement;
}

if (this.origin instanceof ElementRef) {
return this.origin.nativeElement;
}

if (typeof Element !== 'undefined' && this.origin instanceof Element) {
return this.origin;
}

return null;
}

/** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
private _attachOverlay() {
if (!this._overlayRef) {
Expand Down

0 comments on commit 68d7028

Please sign in to comment.