fix(cdk/menu): context menu closing immediately on control + click on Safari (#27838)

Works around a browser inconsistency that was causing the context menu to close immediately when it is opened with control + left click on Safari.

Fixes #27832.

Author: crisbeto

src/cdk/menu/context-menu-trigger.ts

@@ -16,7 +16,7 @@ import {
 } from '@angular/cdk/overlay';
 import {_getEventTarget} from '@angular/cdk/platform';
 import {merge, partition} from 'rxjs';
-import {skip, takeUntil} from 'rxjs/operators';
+import {skip, takeUntil, skipWhile} from 'rxjs/operators';
 import {MENU_STACK, MenuStack} from './menu-stack';
 import {CdkMenuTriggerBase, MENU_TRIGGER} from './menu-trigger-base';
 
@@ -96,7 +96,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
    * @param coordinates where to open the context menu
    */
   open(coordinates: ContextMenuCoordinates) {
-    this._open(coordinates, false);
+    this._open(null, coordinates);
   }
 
   /** Close the currently opened context menu. */
@@ -119,7 +119,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
       event.stopPropagation();
 
       this._contextMenuTracker.update(this);
-      this._open({x: event.clientX, y: event.clientY}, true);
+      this._open(event, {x: event.clientX, y: event.clientY});
 
       // A context menu can be triggered via a mouse right click or a keyboard shortcut.
       if (event.button === 2) {
@@ -172,17 +172,31 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   /**
    * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
    * click occurs outside the menus.
-   * @param ignoreFirstAuxClick Whether to ignore the first auxclick event outside the menu.
+   * @param userEvent User-generated event that opened the menu.
    */
-  private _subscribeToOutsideClicks(ignoreFirstAuxClick: boolean) {
+  private _subscribeToOutsideClicks(userEvent: MouseEvent | null) {
     if (this.overlayRef) {
       let outsideClicks = this.overlayRef.outsidePointerEvents();
-      // If the menu was triggered by the `contextmenu` event, skip the first `auxclick` event
-      // because it fires when the mouse is released on the same click that opened the menu.
-      if (ignoreFirstAuxClick) {
+
+      if (userEvent) {
         const [auxClicks, nonAuxClicks] = partition(outsideClicks, ({type}) => type === 'auxclick');
-        outsideClicks = merge(nonAuxClicks, auxClicks.pipe(skip(1)));
+        outsideClicks = merge(
+          // Using a mouse, the `contextmenu` event can fire either when pressing the right button
+          // or left button + control. Most browsers won't dispatch a `click` event right after
+          // a `contextmenu` event triggered by left button + control, but Safari will (see #27832).
+          // This closes the menu immediately. To work around it, we check that both the triggering
+          // event and the current outside click event both had the control key pressed, and that
+          // that this is the first outside click event.
+          nonAuxClicks.pipe(
+            skipWhile((event, index) => userEvent.ctrlKey && index === 0 && event.ctrlKey),
+          ),
+
+          // If the menu was triggered by the `contextmenu` event, skip the first `auxclick` event
+          // because it fires when the mouse is released on the same click that opened the menu.
+          auxClicks.pipe(skip(1)),
+        );
       }
+
       outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe(event => {
         if (!this.isElementInsideMenuStack(_getEventTarget(event)!)) {
           this.menuStack.closeAll();
@@ -193,10 +207,10 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
 
   /**
    * Open the attached menu at the specified location.
+   * @param userEvent User-generated event that opened the menu
    * @param coordinates where to open the context menu
-   * @param ignoreFirstOutsideAuxClick Whether to ignore the first auxclick outside the menu after opening.
    */
-  private _open(coordinates: ContextMenuCoordinates, ignoreFirstOutsideAuxClick: boolean) {
+  private _open(userEvent: MouseEvent | null, coordinates: ContextMenuCoordinates) {
     if (this.disabled) {
       return;
     }
@@ -222,7 +236,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
       }
 
       this.overlayRef.attach(this.getMenuContentPortal());
-      this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
+      this._subscribeToOutsideClicks(userEvent);
     }
   }
 }