@@ -404,29 +404,31 @@ export class _MatMenuBase
404
404
* out so we don't repeat the same logic in the public `focusFirstItem` method.
405
405
*/
406
406
private _focusFirstItem ( origin : FocusOrigin ) {
407
- const manager = this . _keyManager ;
407
+ setTimeout ( ( ) => {
408
+ const manager = this . _keyManager ;
408
409
409
- manager . setFocusOrigin ( origin ) . setFirstItemActive ( ) ;
410
-
411
- // If there's no active item at this point, it means that all the items are disabled.
412
- // Move focus to the menu panel so keyboard events like Escape still work. Also this will
413
- // give _some_ feedback to screen readers.
414
- if ( ! manager . activeItem && this . _directDescendantItems . length ) {
415
- let element = this . _directDescendantItems . first ! . _getHostElement ( ) . parentElement ;
416
-
417
- // Because the `mat-menu` is at the DOM insertion point, not inside the overlay, we don't
418
- // have a nice way of getting a hold of the menu panel. We can't use a `ViewChild` either
419
- // because the panel is inside an `ng-template`. We work around it by starting from one of
420
- // the items and walking up the DOM.
421
- while ( element ) {
422
- if ( element . getAttribute ( 'role' ) === 'menu' ) {
423
- element . focus ( ) ;
424
- break ;
425
- } else {
426
- element = element . parentElement ;
410
+ manager . setFocusOrigin ( origin ) . setFirstItemActive ( ) ;
411
+
412
+ // If there's no active item at this point, it means that all the items are disabled.
413
+ // Move focus to the menu panel so keyboard events like Escape still work. Also this will
414
+ // give _some_ feedback to screen readers.
415
+ if ( ! manager . activeItem && this . _directDescendantItems . length ) {
416
+ let element = this . _directDescendantItems . first ! . _getHostElement ( ) . parentElement ;
417
+
418
+ // Because the `mat-menu` is at the DOM insertion point, not inside the overlay, we don't
419
+ // have a nice way of getting a hold of the menu panel. We can't use a `ViewChild` either
420
+ // because the panel is inside an `ng-template`. We work around it by starting from one of
421
+ // the items and walking up the DOM.
422
+ while ( element ) {
423
+ if ( element . getAttribute ( 'role' ) === 'menu' ) {
424
+ console . log ( 'MatMenu focusing on' , element ) ;
425
+ break ;
426
+ } else {
427
+ element = element . parentElement ;
428
+ }
427
429
}
428
430
}
429
- }
431
+ } , 0 ) ;
430
432
}
431
433
432
434
/**
0 commit comments