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

When an event handler listening to the `outsidePointerEvents` observable closes out any open
overlays this removes them from the OverlayOutsideClickDispatcher's array of overlay elements. This
results in an error being thrown since the overlays array in the for-loop is modified (elements are
removed) and the counter not accounting for this. This fix ensures that if the array of overlay
refs is modified we don't get an off by 1 error when fetching an element from the array on
subsequent iterations of the loop.

Author: andy9775

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;
       }