如何在 primeng 对话框中将焦点设置在关闭按钮上

Question

How to set focus on close button in primeng dialog after it's opened? I tried something like this, but it doesn't work. 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();
  }

Update: I found solution how to set focus on this element

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

but it doesn't stick. When I check focus inside openDialog it's set, but after that it still sets to another button.

Answer 1

I think you can use Renderer2 to access the element. Something like this:

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

Then: element.focus();

I think you can refer here for better understanding.