diff --git a/src/cdk/a11y/key-manager/list-key-manager.ts b/src/cdk/a11y/key-manager/list-key-manager.ts index 49522b7d82ab..b0ab3c030565 100644 --- a/src/cdk/a11y/key-manager/list-key-manager.ts +++ b/src/cdk/a11y/key-manager/list-key-manager.ts @@ -68,8 +68,10 @@ export class ListKeyManager { // We allow for the items to be an array because, in some cases, the consumer may // not have access to a QueryList of the items they want to manage (e.g. when the // items aren't being collected via `ViewChildren` or `ContentChildren`). + console.log('ListKeyManager > #Items', this._items.length); if (_items instanceof QueryList) { this._itemChangesSubscription = _items.changes.subscribe((newItems: QueryList) => { + console.log('ListKeyManager > #Items', this._items.length); if (this._activeItem) { const itemArray = newItems.toArray(); const newIndex = itemArray.indexOf(this._activeItem); diff --git a/src/dev-app/menu/menu-demo.html b/src/dev-app/menu/menu-demo.html index 69338bb190e8..eb020e5cd836 100644 --- a/src/dev-app/menu/menu-demo.html +++ b/src/dev-app/menu/menu-demo.html @@ -9,13 +9,15 @@ - @for (item of items; track item) { - - } + + @for (item of items; track item) { + + } + - +
This div is for testing scrolled menus.
diff --git a/src/material/menu/menu-content.ts b/src/material/menu/menu-content.ts index 0c9426dda717..42ed5483ff38 100644 --- a/src/material/menu/menu-content.ts +++ b/src/material/menu/menu-content.ts @@ -81,6 +81,7 @@ export class MatMenuContent implements OnDestroy { * @docs-private */ attach(context: any = {}) { + console.log('MatMenuContent > attach'); if (!this._portal) { this._portal = new TemplatePortal(this._template, this._viewContainerRef); } diff --git a/src/material/menu/menu-trigger.ts b/src/material/menu/menu-trigger.ts index 13b9c3ea7c09..472ca2cdbccb 100644 --- a/src/material/menu/menu-trigger.ts +++ b/src/material/menu/menu-trigger.ts @@ -319,6 +319,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { /** Opens the menu. */ openMenu(): void { + console.log('MatMenuTrigger > openMenu'); const menu = this.menu; if (this._menuOpen || !menu) { diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index eee64ef2ea79..277faf507a69 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -1,4 +1,11 @@ -import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing'; +import { + ComponentFixture, + fakeAsync, + flush, + TestBed, + tick, + waitForAsync, +} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import { @@ -772,27 +779,14 @@ describe('MDC-based MatMenu', () => { })); it('should set the proper origin when calling focusFirstItem after the opening sequence has started', () => { - let zone: MockNgZone; - const fixture = createComponent( - SimpleMenu, - [ - { - provide: NgZone, - useFactory: () => (zone = new MockNgZone()), - }, - ], - [FakeIcon], - ); + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); fixture.detectChanges(); spyOn(fixture.componentInstance.items.first, 'focus').and.callThrough(); - const triggerEl = fixture.componentInstance.triggerEl.nativeElement; - - dispatchMouseEvent(triggerEl, 'mousedown'); - triggerEl.click(); - fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.componentInstance.menu.focusFirstItem('mouse'); fixture.componentInstance.menu.focusFirstItem('touch'); - zone!.onStable.next(); + fixture.detectChanges(); expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledOnceWith('touch'); }); @@ -1304,25 +1298,16 @@ describe('MDC-based MatMenu', () => { expect(trigger.menuOpen).withContext('Expected menu to be closed').toBe(false); })); - it('should focus the first menu item when opening a lazy menu via keyboard', fakeAsync(() => { - let zone: MockNgZone; - let fixture = createComponent(SimpleLazyMenu, [ - { - provide: NgZone, - useFactory: () => (zone = new MockNgZone()), - }, - ]); + fit('should focus the first menu item when opening a lazy menu via keyboard', waitForAsync(async () => { + let fixture = createComponent(SimpleLazyMenu); fixture.detectChanges(); // A click without a mousedown before it is considered a keyboard open. + console.log('Test > click'); fixture.componentInstance.triggerEl.nativeElement.click(); + console.log('Test > detectChanges'); fixture.detectChanges(); - tick(500); - zone!.simulateZoneExit(); - - // Flush due to the additional tick that is necessary for the FocusMonitor. - flush(); const item = document.querySelector('.mat-mdc-menu-panel [mat-menu-item]')!; diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index 666226b7ddb2..df1cb1a495e1 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -425,10 +425,12 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI * @param origin Action from which the focus originated. Used to set the correct styling. */ focusFirstItem(origin: FocusOrigin = 'program'): void { + console.log('MatMenu > focusFirstItem'); // Wait for `afterNextRender` to ensure iOS VoiceOver screen reader focuses the first item (#24735). this._firstItemFocusRef?.destroy(); this._firstItemFocusRef = afterNextRender( () => { + console.log('MatMenu > focusFirstItem > afterNextRender'); let menuPanel: HTMLElement | null = null; if (this._directDescendantItems.length) {