@angular/cdk 12.2.7 → 12.2.11

package/bundles/cdk-overlay.umd.js

@@ -941,9 +941,24 @@
             var _this = _super.call(this, document) || this;
             _this._platform = _platform;
             _this._cursorStyleIsSet = false;
+            /** Store pointerdown event target to track origin of click. */
+            _this._pointerDownListener = function (event) {
+                _this._pointerDownEventTarget = i2._getEventTarget(event);
+            };
             /** Click event listener that will be attached to the body propagate phase. */
             _this._clickListener = function (event) {
                 var target = i2._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).
+                var 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.
@@ -958,8 +973,10 @@
                         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);
@@ -978,6 +995,7 @@
             // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
             if (!this._isAttached) {
                 var 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);
@@ -995,6 +1013,7 @@
         OverlayOutsideClickDispatcher.prototype.detach = function () {
             if (this._isAttached) {
                 var 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);