fix(cdk/overlay): ensure OverlayOutsideClickDispatcher listens to contextmenu events (#20373)

If an overlay is open and a user opens a contextmenu (on an element outside the overlay) the
overlay does not close. This fix ensure that contextmenu events are treated the same way as click
events which result in the outsidePointerEvents observable emitting an event.

(cherry picked from commit 7a63ad6)

Author: andy9775

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts

@@ -1,10 +1,10 @@
 import {TestBed, inject} from '@angular/core/testing';
 import {Component, NgModule} from '@angular/core';
+import {dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {OverlayModule, OverlayContainer, Overlay} from '../index';
 import {OverlayOutsideClickDispatcher} from './overlay-outside-click-dispatcher';
 import {ComponentPortal} from '@angular/cdk/portal';
 
-
 describe('OverlayOutsideClickDispatcher', () => {
   let outsideClickDispatcher: OverlayOutsideClickDispatcher;
   let overlay: Overlay;
@@ -147,6 +147,37 @@ describe('OverlayOutsideClickDispatcher', () => {
     buttonShouldNotDetach.parentNode!.removeChild(buttonShouldNotDetach);
     overlayRef.dispose();
   });
+
+  it('should dispatch an event when a context menu is triggered outside the overlay', () => {
+    const portal = new ComponentPortal(TestComponent);
+    const overlayRef = overlay.create();
+    overlayRef.attach(portal);
+    const context = document.createElement('div');
+    document.body.appendChild(context);
+
+    const spy = jasmine.createSpy('overlay contextmenu spy');
+    overlayRef.outsidePointerEvents().subscribe(spy);
+
+    dispatchMouseEvent(context, 'contextmenu');
+    expect(spy).toHaveBeenCalled();
+
+    context.parentNode!.removeChild(context);
+    overlayRef.dispose();
+  });
+
+  it('should not dispatch an event when a context menu is triggered inside the overlay', () => {
+    const portal = new ComponentPortal(TestComponent);
+    const overlayRef = overlay.create();
+    overlayRef.attach(portal);
+
+    const spy = jasmine.createSpy('overlay contextmenu spy');
+    overlayRef.outsidePointerEvents().subscribe(spy);
+
+    dispatchMouseEvent(overlayRef.overlayElement, 'contextmenu');
+    expect(spy).not.toHaveBeenCalled();
+
+    overlayRef.dispose();
+  });
 });
 
 

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts

@@ -40,6 +40,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
     // tslint:enable: max-line-length
     if (!this._isAttached) {
       this._document.body.addEventListener('click', this._clickListener, true);
+      this._document.body.addEventListener('contextmenu', this._clickListener, true);
 
       // click event is not fired on iOS. To make element "clickable" we are
       // setting the cursor to pointer
@@ -57,6 +58,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
   protected detach() {
     if (this._isAttached) {
       this._document.body.removeEventListener('click', this._clickListener, true);
+      this._document.body.removeEventListener('contextmenu', this._clickListener, true);
       if (this._platform.IOS && this._cursorStyleIsSet) {
         this._document.body.style.cursor = this._cursorOriginalValue;
         this._cursorStyleIsSet = false;