fix(menu): scrollable menu not scrolled to top when opened for the first time (#11859)

Author: crisbeto

src/lib/menu/menu-directive.ts

@@ -385,5 +385,15 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
   _onAnimationDone(event: AnimationEvent) {
     this._animationDone.next(event);
     this._isAnimating = false;
+
+    // Scroll the content element to the top once the animation is done. This is necessary, because
+    // we move focus to the first item while it's still being animated, which can throw the browser
+    // off when it determines the scroll position. Alternatively we can move focus when the
+    // animation is done, however moving focus asynchronously will interrupt screen readers
+    // which are in the process of reading out the menu already. We take the `element` from
+    // the `event` since we can't use a `ViewChild` to access the pane.
+    if (event.toState === 'enter' && this._keyManager.activeItemIndex === 0) {
+      event.element.scrollTop = 0;
+    }
   }
 }

src/lib/menu/menu.spec.ts

@@ -164,6 +164,23 @@ describe('MatMenu', () => {
     expect(document.activeElement).toBe(triggerEl);
   }));
 
+  it('should scroll the panel to the top on open, when it is scrollable', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    // Add 50 items to make the menu scrollable
+    fixture.componentInstance.extraItems = new Array(50).fill('Hello there');
+    fixture.detectChanges();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+    dispatchFakeEvent(triggerEl, 'mousedown');
+    triggerEl.click();
+    fixture.detectChanges();
+    tick();
+
+    expect(overlayContainerElement.querySelector('.mat-menu-panel')!.scrollTop).toBe(0);
+  }));
+
   it('should set the proper focus origin when restoring focus after opening by keyboard',
     fakeAsync(() => {
       const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
@@ -1674,6 +1691,7 @@ describe('MatMenu default overrides', () => {
         <fake-icon>unicorn</fake-icon>
         Item with an icon
       </button>
+      <button *ngFor="let item of extraItems" mat-menu-item> {{item}} </button>
     </mat-menu>
   `
 })
@@ -1682,6 +1700,7 @@ class SimpleMenu {
   @ViewChild('triggerEl') triggerEl: ElementRef;
   @ViewChild(MatMenu) menu: MatMenu;
   @ViewChildren(MatMenuItem) items: QueryList<MatMenuItem>;
+  extraItems: string[] = [];
   closeCallback = jasmine.createSpy('menu closed callback');
   backdropClass: string;
 }