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

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;
@@ -155,6 +155,37 @@ describe('OverlayOutsideClickDispatcher', () => {
 
     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;