@angular/cdk 12.2.7 → 12.2.11

package/fesm2015/overlay.js

@@ -596,9 +596,24 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         super(document);
         this._platform = _platform;
         this._cursorStyleIsSet = false;
+        /** Store pointerdown event target to track origin of click. */
+        this._pointerDownListener = (event) => {
+            this._pointerDownEventTarget = _getEventTarget(event);
+        };
         /** Click event listener that will be attached to the body propagate phase. */
         this._clickListener = (event) => {
             const target = _getEventTarget(event);
+            // In case of a click event, we want to check the origin of the click
+            // (e.g. in case where a user starts a click inside the overlay and
+            // releases the click outside of it).
+            // This is done by using the event target of the preceding pointerdown event.
+            // Every click event caused by a pointer device has a preceding pointerdown
+            // event, unless the click was programmatically triggered (e.g. in a unit test).
+            const origin = event.type === 'click' && this._pointerDownEventTarget
+                ? this._pointerDownEventTarget : target;
+            // Reset the stored pointerdown event target, to avoid having it interfere
+            // in subsequent events.
+            this._pointerDownEventTarget = null;
             // We copy the array because the original may be modified asynchronously if the
             // outsidePointerEvents listener decides to detach overlays resulting in index errors inside
             // the for loop.
@@ -613,8 +628,10 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
                     continue;
                 }
                 // If it's a click inside the overlay, just break - we should do nothing
-                // If it's an outside click dispatch the mouse event, and proceed with the next overlay
-                if (overlayRef.overlayElement.contains(target)) {
+                // If it's an outside click (both origin and target of the click) dispatch the mouse event,
+                // and proceed with the next overlay
+                if (overlayRef.overlayElement.contains(target) ||
+                    overlayRef.overlayElement.contains(origin)) {
                     break;
                 }
                 overlayRef._outsidePointerEvents.next(event);
@@ -632,6 +649,7 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
         if (!this._isAttached) {
             const body = this._document.body;
+            body.addEventListener('pointerdown', this._pointerDownListener, true);
             body.addEventListener('click', this._clickListener, true);
             body.addEventListener('auxclick', this._clickListener, true);
             body.addEventListener('contextmenu', this._clickListener, true);
@@ -649,6 +667,7 @@ class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
     detach() {
         if (this._isAttached) {
             const body = this._document.body;
+            body.removeEventListener('pointerdown', this._pointerDownListener, true);
             body.removeEventListener('click', this._clickListener, true);
             body.removeEventListener('auxclick', this._clickListener, true);
             body.removeEventListener('contextmenu', this._clickListener, true);