Description
Bug, feature request, or proposal:
I need keyboard navigation order of dynamic menu items to match the visual order in which the items appear.
What is the expected behavior?
In the stackblitz example below, I expect the down arrow key to navigate in the order A-B-C-D-E.
What is the current behavior?
The navigation order is A-B-D-E-C.
What are the steps to reproduce?
https://angular-material2-issue-gxemkt.stackblitz.io
What is the use-case or motivation for changing an existing behavior?
We're trying to use mat-menu for a dynamically created menu and the last menu item, "Sign Out", is being highlighted first -- something we definitely don't want to appear as a default menu action. We anticipate that this won't be the only issue we'll run into if we keep going with mat-menu, as the stackblitz demo above shows. There appears to be no way we can take control of the navigation order to fix this problem.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.0.2, Material 6.0.2, Windows 7, TypeScript 2.7.2, Chrome, Firefox, and IE.