0

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.

genek
  • 137
  • 1
  • 1
  • 8

1 Answers1

0

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.

Rounak Snehasis
  • 91
  • 5
  • This element doesn't have id. It has class and I can find it like this: let element = document.getElementsByClassName('ui-dialog-titlebar-close').item(0) but how to set focus on it? – genek Jan 23 '20 at 08:32
  • I think the following link would be helpful. https://stackoverflow.com/a/42996588/10342976 – Rounak Snehasis Jan 23 '20 at 09:02