fix(cdk/overlay): ensure error isn't thrown when many overlay items are closed from handler

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

@@ -1,4 +1,4 @@
-import {TestBed, inject} from '@angular/core/testing';
+import {TestBed, inject, fakeAsync} from '@angular/core/testing';
 import {Component, NgModule} from '@angular/core';
 import {dispatchMouseEvent} from '@angular/cdk/testing/private';
 import {OverlayModule, OverlayContainer, Overlay} from '../index';
@@ -55,7 +55,10 @@ describe('OverlayOutsideClickDispatcher', () => {
     'should dispatch mouse click events to the attached overlays',
     () => {
     const overlayOne = overlay.create();
+    overlayOne.attach(new ComponentPortal(TestComponent));
     const overlayTwo = overlay.create();
+    overlayTwo.attach(new ComponentPortal(TestComponent));
+
     const overlayOneSpy = jasmine.createSpy('overlayOne mouse click event spy');
     const overlayTwoSpy = jasmine.createSpy('overlayTwo mouse click event spy');
 
@@ -81,6 +84,7 @@ describe('OverlayOutsideClickDispatcher', () => {
     'should dispatch mouse click events to the attached overlays even when propagation is stopped',
     () => {
     const overlayRef = overlay.create();
+    overlayRef.attach(new ComponentPortal(TestComponent));
     const spy = jasmine.createSpy('overlay mouse click event spy');
     overlayRef.outsidePointerEvents().subscribe(spy);
 
@@ -186,6 +190,40 @@ describe('OverlayOutsideClickDispatcher', () => {
 
     overlayRef.dispose();
   });
+
+  it(
+    'should not throw an error when when closing out related components via the' +
+      ' outsidePointerEvents emitter on background click',
+    fakeAsync(() => {
+      const firstOverlayRef = overlay.create();
+      firstOverlayRef.attach(new ComponentPortal(TestComponent));
+      const secondOverlayRef = overlay.create();
+      secondOverlayRef.attach(new ComponentPortal(TestComponent));
+      const thirdOverlayRef = overlay.create();
+      thirdOverlayRef.attach(new ComponentPortal(TestComponent));
+
+      const spy = jasmine.createSpy('background click handler spy').and.callFake(() => {
+        // we close out both overlays from a single outside click event
+        firstOverlayRef.detach();
+        thirdOverlayRef.detach();
+      });
+      firstOverlayRef.outsidePointerEvents().subscribe(spy);
+      secondOverlayRef.outsidePointerEvents().subscribe(spy);
+      thirdOverlayRef.outsidePointerEvents().subscribe(spy);
+
+      const backgroundElement = document.createElement('div');
+      document.body.appendChild(backgroundElement);
+
+      expect(() => backgroundElement.click()).not.toThrowError();
+
+      expect(spy).toHaveBeenCalled();
+
+      backgroundElement.parentNode!.removeChild(backgroundElement);
+      firstOverlayRef.dispose();
+      secondOverlayRef.dispose();
+      thirdOverlayRef.dispose();
+    }
+  ));
 });
 
 

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

@@ -71,15 +71,18 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
   private _clickListener = (event: MouseEvent) => {
     // Get the target through the `composedPath` if possible to account for shadow DOM.
     const target = event.composedPath ? event.composedPath()[0] : event.target;
-    const overlays = this._attachedOverlays;
+    // 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.
+    const overlays = this._attachedOverlays.slice();
 
     // Dispatch the mouse event to the top overlay which has subscribers to its mouse events.
     // We want to target all overlays for which the click could be considered as outside click.
     // As soon as we reach an overlay for which the click is not outside click we break off
     // the loop.
     for (let i = overlays.length - 1; i > -1; i--) {
       const overlayRef = overlays[i];
-      if (overlayRef._outsidePointerEvents.observers.length < 1) {
+      if (overlayRef._outsidePointerEvents.observers.length < 1 || !overlayRef.hasAttached()) {
         continue;
       }