bug(MatMenu): resetActiveItem() function doesn't work

[gigitux]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-vq8r9z?file=src%2Fapp%2Fmenu-overview-example.ts

Steps to reproduce:

1. Click on Menu
2. Press the down directional arrow

Expected Behavior

According to docs with resetActiveItem, when the menu is opened, allowing the user to start from the first option when pressing the down arrow.

Actual Behavior

When press the down direction arrow, the second option is focused

Environment

• Angular: 10
• CDK/Material: 10
• Browser(s): Firefox/Chromium
• Operating System (e.g. Windows, macOS, Ubuntu): Fedora

[crisbeto]

There are two separate issues here. First of all, since we move focus after we've dispatched the menuOpened event, any focus that you've set will be overwritten. This will be fixed in #20968, but until it lands you can work around it by moving focus in a setTimeout. The other issue is that even if focus was moved, currently it won't show up for the first item, because technically it already has focus. This will be resolved by #20966.