fix(material/menu): moving focus on destroy not working without animations module

We have some logic that will move focus in the menu if the active item is destroyed. This seems to only work when there's an animations module available, because otherwise the item is removed from the DOM by the time we check if it's focused.

These changes resolve the issue by basing the logic on the state in the key manager.

Author: crisbeto

goldens/material/menu/index.api.md

@@ -195,8 +195,6 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     getLabel(): string;
     _getTabIndex(): string;
     _handleMouseEnter(): void;
-    // (undocumented)
-    _hasFocus(): boolean;
     _highlighted: boolean;
     readonly _hovered: Subject<MatMenuItem>;
     // (undocumented)

src/material/menu/menu-item.ts

@@ -17,7 +17,6 @@ import {
   ChangeDetectorRef,
   booleanAttribute,
   inject,
-  DOCUMENT,
 } from '@angular/core';
 import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
@@ -50,7 +49,6 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 })
 export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private _document = inject(DOCUMENT);
   private _focusMonitor = inject(FocusMonitor);
   _parentMenu? = inject<MatMenuPanel<MatMenuItem>>(MAT_MENU_PANEL, {optional: true});
   private _changeDetectorRef = inject(ChangeDetectorRef);
@@ -164,8 +162,4 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
     this._triggersSubmenu = triggersSubmenu;
     this._changeDetectorRef.markForCheck();
   }
-
-  _hasFocus(): boolean {
-    return this._document && this._document.activeElement === this._getHostElement();
-  }
 }

src/material/menu/menu.spec.ts

@@ -30,7 +30,6 @@ import {
 } from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Subject} from 'rxjs';
 import {
   createKeyboardEvent,
@@ -256,10 +255,6 @@ describe('MatMenu', () => {
   }));
 
   it('should move focus to another item if the active item is destroyed', fakeAsync(() => {
-    // TODO(crisbeto): figure out why NoopAnimationsModule is necessary
-    // here and our token isn't enough. Likely indicates an issue.
-    TestBed.resetTestingModule().configureTestingModule({imports: [NoopAnimationsModule]});
-    overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement();
     const fixture = TestBed.createComponent(MenuWithRepeatedItems);
     fixture.detectChanges();
     const triggerEl = fixture.componentInstance.triggerEl.nativeElement;

src/material/menu/menu.ts

@@ -320,7 +320,11 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
       // in quick succession.
       const manager = this._keyManager;
 
-      if (this._panelAnimationState === 'enter' && manager.activeItem?._hasFocus()) {
+      if (
+        this._panelAnimationState === 'enter' &&
+        manager.activeItem &&
+        !itemsList.some(item => item === manager.activeItem)
+      ) {
         const items = itemsList.toArray();
         const index = Math.max(0, Math.min(items.length - 1, manager.activeItemIndex || 0));