Prime NG 菜單 - 激活時關注第一個元素

Question

我試圖將焦點從 prime ng 菜單移動到切換菜單時出現的第一個列表元素。 這是我到目前為止所擁有的。

在模板中我有：

<p-menu appendTo="body" #menu [popup]="true" [model]="menuItems" (onShow)="openMenu()"></p-menu>

在我的 typescript 中，我有：

@ViewChild('menu', { read: ElementRef }) menu: ElementRef;

...

openMenu() {
    const menuItem = (
      this.menu.nativeElement.getElementsByClassName(
        'p-menuitem'
      ) as HTMLCollectionOf<HTMLElement>
    )[0];

    menuItem.focus();
  }

當測試這個時，元素肯定被發現了，我可以在元素上設置屬性。 但是，設置焦點似乎不起作用。 有什么合適的方法來訪問 DOM 元素和設置焦點嗎？

謝謝！

Answer 1

這最終對我有用：

openMenu() {
    const menuItem = (
      this.menu.nativeElement.getElementsByClassName(
        'p-menuitem-link'
      ) as HTMLCollectionOf<HTMLElement>
    )[0];

    setTimeout(() => {
      menuItem.focus();
    }, 1);
  }