Как установить фокус на кнопку закрытия в диалоговом окне

Question

Как установить фокус на кнопку закрытия в диалоге primeng после его открытия? Я пробовал что-то подобное, но это не работает. HTML:

<p-dialog
  [modal]="true"
  [resizable]="true"
  [draggable]="false"
  header="header"
  [(visible)]="dialogVisible"
  (onHide)="closeDialog()"
  (onShow)="openDialog()"
  focusOnShow="false"
>

ts:

constructor(private element: ElementRef<HTMLAnchorElement>) {}
openDialog() {
    this.element.nativeElement.focus();
  }

Обновление: я нашел решение, как установить фокус на этот элемент

openDialog() {
    const element = this.elem.nativeElement.querySelectorAll('.ui-dialog-titlebar-close').item(0);
    element.focus();
console.log(document.activeElement)
  }

, но это не так придерживаться. Когда я проверяю фокус внутри openDialog, он устанавливается, но после этого он все еще устанавливает другую кнопку.

Answer 1

Я думаю, вы можете использовать Renderer2 для доступа к элементу. Примерно так:

const element = this.renderer.selectRootElement('#elementId');

Тогда: element.focus();

Я думаю, вы можете обратиться здесь для лучшего понимания.