Skip to content

Commit 06fa24d

Browse files
committed
fix(material/menu): debugging focusing the first item with iOS Voiceover
1 parent 26e6c1f commit 06fa24d

File tree

1 file changed

+22
-20
lines changed

1 file changed

+22
-20
lines changed

src/material/menu/menu.ts

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -404,29 +404,31 @@ export class _MatMenuBase
404404
* out so we don't repeat the same logic in the public `focusFirstItem` method.
405405
*/
406406
private _focusFirstItem(origin: FocusOrigin) {
407-
const manager = this._keyManager;
407+
setTimeout(() => {
408+
const manager = this._keyManager;
408409

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+
}
427429
}
428430
}
429-
}
431+
}, 0);
430432
}
431433

432434
/**

0 commit comments

Comments
 (0)