fix(a11y): focus trap incorrectly moving focus internally if focus was already moved into it

src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts

@@ -41,6 +41,21 @@ describe('EventListenerFocusTrapInertStrategy', () => {
         componentInstance.secondFocusableElement.nativeElement,
         'Expected second focusable element to be focused');
   }));
+
+  it('should not intercept focus if it moved outside the trap and back in again',
+    fakeAsync(() => {
+      const fixture = createComponent(SimpleFocusTrap, providers);
+      fixture.detectChanges();
+      const {secondFocusableElement, outsideFocusableElement} = fixture.componentInstance;
+
+      outsideFocusableElement.nativeElement.focus();
+      secondFocusableElement.nativeElement.focus();
+      flush();
+
+      expect(fixture.componentInstance.activeElement).toBe(secondFocusableElement.nativeElement,
+          'Expected second focusable element to be focused');
+  }));
+
 });
 
 function createComponent<T>(componentType: Type<T>, providers: Array<Object> = []
@@ -91,6 +106,7 @@ class SimpleFocusTrap implements AfterViewInit {
     });
 
     this.focusTrap = this._focusTrapFactory.create(this.focusTrapElement.nativeElement);
+    spyOnProperty(document, 'activeElement', 'get').and.callFake(() => this.activeElement);
     this.focusTrap.focusFirstTabbableElementWhenReady();
   }
 }

src/cdk/a11y/focus-trap/event-listener-inert-strategy.ts

@@ -49,15 +49,17 @@ export class EventListenerFocusTrapInertStrategy implements FocusTrapInertStrate
    */
   private _trapFocus(focusTrap: ConfigurableFocusTrap, event: FocusEvent) {
     const target = event.target as HTMLElement;
+    const focusTrapRoot = focusTrap._element;
+
     // Don't refocus if target was in an overlay, because the overlay might be associated
     // with an element inside the FocusTrap, ex. mat-select.
-    if (!focusTrap._element.contains(target) &&
-      closest(target, 'div.cdk-overlay-pane') === null) {
+    if (!focusTrapRoot.contains(target) && closest(target, 'div.cdk-overlay-pane') === null) {
         // Some legacy FocusTrap usages have logic that focuses some element on the page
         // just before FocusTrap is destroyed. For backwards compatibility, wait
         // to be sure FocusTrap is still enabled before refocusing.
         setTimeout(() => {
-          if (focusTrap.enabled) {
+          // Check whether focus wasn't put back into the focus trap while the timeout was pending.
+          if (focusTrap.enabled && !focusTrapRoot.contains(focusTrap._document.activeElement)) {
             focusTrap.focusFirstTabbableElement();
           }
         });