Primeng: p-dialog box auto focus issue

Created on 29 Mar 2018 · 7Comments · Source: primefaces/primeng

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
focus does not work on any element in the p-dialog
consider a scenario with five
current
expectedfoucs

input boxes in p-dialog and we applied autofocus for the first input box.
It works only once, for initial page load. If the dialog box is opened again it will not focus on the first field.

Expected behavior
taking the above scenario in the current behavior into consideration, the first input box should always come into focus whenever p-dialog box is opened

Minimal reproduction of the problem with instructions

Step 1 : create component
step 2 : add a button to the component
step 3 : add a p-dialog box as mentioned in the above scenario's to the component
step 4 : let the p-dialog box show based on the button click

What is the motivation / use case for changing the behavior?
If primng produce some attribute to get focus on input-field in p-dialog box then that would be helpful because autofocus(html) works only on initial load.

Please tell us about your environment:
Operating system-Windows 10,
IDE-Webstorm,
package manager-npm,

Angular version: 4

*PrimeNG version: 4.3.0

Browser:
-Chrome , Firefox ,IE,Safari

Language: [all | TypeScript 2.3.3 | ES6/7 | ES5]
Node (for AoT issues): node --version = 6.11.3

Source

sridhark158

👍4

Most helpful comment

In the HTML file of your component add #focus
In your component ts file declare
@ViewChild('focus') searchElement: ElementRef;
Modify the method of button which helps in opening the p-dialog to
openDialog() {
setTimeout(() => {
this.searchElement.nativeElement.focus();
}, 0);}

chaitrashenoy33 on 24 Jun 2019

👍6 🎉3

All 7 comments

even i am facing the same problem in p-dialog

chaitrashenoy33 on 30 Mar 2018

👍2

You can disable current behavior with focusOnShow (5.2.5) and manage your own focus instead, with autofocus on input.

cagataycivici on 25 Apr 2018

👍1

Just FYI, autofocus on input only works _once_. If the Dialog opens again without a new page load, it will not work.
Reference the HTML Spec

jason-jason-h on 4 May 2018

It seems that the focusOnShow should move focus to the first element in the dialog which should be the dialog's p-header.

Focusing on the initial input field is great for sighted users, however it neglects accessibility. I am sure there are many cases where it is fine and many where it creates a point of confusion, so also remember this consideration.

jason-jason-h on 22 May 2018

In the HTML file of your component add #focus
In your component ts file declare
@ViewChild('focus') searchElement: ElementRef;
Modify the method of button which helps in opening the p-dialog to
openDialog() {
setTimeout(() => {
this.searchElement.nativeElement.focus();
}, 0);}