Focus does not stay inside the PrimeNG <p-dialog> component

3
votes

I have been using PrimeNG in the project. I came across one issue regarding the focus of the
p-dialog component. Even in the example given in PrimeNG website we are able to reproduce this issue. e.g. https://www.primefaces.org/primeng/#/dialog
Steps to reproduce this:

  1. Click on the 'show' button
  2. Press 'Tab' on the keyboard.

You can see the focus is lost and goes to the back screen.
Now I have tried using modal attribute provided in the document with the values modal or true.

Anybody has faced this issue? Is there anything that I am missing?
When the dialog opens, how should I keep and restrict the focus on the dialog and not on the back screen?

2
angularmodal-dialogprimeng
github.com/primefaces/primeng/issues/4544 github.com/primefaces/primeng/issues/4541 There is also some fix github.com/primefaces/primeng/issues/4686 but it is not in release yet – yurzui
I have tries these but still does not work... – Shaggy

2 Answers

1
votes

Use onShow() of primeng dialog and in that function use queryselector to select the dom element as HTMLElement and call focus() function. Ex:

onShow() {
    (document.querySelector('input[name="time"]') as HTMLElement).focus();
}
1
votes

PrimeNG team has fixed this issue in v7 and above.

May check the same link mentioned above: https://www.primefaces.org/primeng/#/dialog