AutoFocus: Does not work inside dialog

[Urtgard]

Describe the bug

If AutoFocus is used inside a dialog, focus is not applied to the element.

Environment

Stackblitz

Reproducer

https://stackblitz.com/edit/primeng-dialog-demo-u6rtzk?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.spec.ts,src%2Fapp%2Fapp.component.html

Angular version

15.2.1

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.17.1

Browser(s)

No response

Steps to reproduce the behavior

Use autofocus inside a dialog.

<p-dialog [(visible)]="displayBasic">
  <input
    type="text"
    pInputText
    placeholder="Automatically focused"
    pAutoFocus
    [autofocus]="true"
  />
</p-dialog>

Expected behavior

Dialog opens and focus is applied to the element.

[dluzhin]

I confirm we have the same problem in our team. The problem also accures in dynamic dialog component

[nvkuznetsova]

I have the same issue inside dynamic dialog

[jgaston5]

I believe that this issue is related to the fix for #12319. It nolonger looks for the autofocus element, but rather just grabs the first focusable item.

[alvarosinmarca]

Same error with version primeng 16.0.2

[cetincakiroglu]

This happens because autoFocus is applied on the initial load of the page rather than the component initialization, that's how the autofocus attribute works in a webpage. Directive's sole purpose is to give autofocus property in the correct way, some html attributes need to be assigned in a different way because of virtual dom. In your example, autofocus does the job and focuses on the first element, as I mentioned it does not work in component-wise, component initialization is not the case with HTML autofocus attribute it only works on the initial load of the webpage.

Because of this, autofocus will not work when the component is initialized and that's why the input inside the dialog doesn't receive focus since autofocus is already applied at the initial load to a different element. Even removing autofocus from the other input will not make it work as you wanted. Instead, you can implement it manually as below, please see the refactored example.
Closing the issue since it's a misunderstanding of the autofocus attribute, thanks for reporting!

https://stackblitz.com/edit/primeng-dialog-demo-hruxst?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

[alvarosinmarca]

@cetincakiroglu Thx for you example, but your example is used in html. I need use dynamic dialog. https://primeng.org/dynamicdialog

[VolodymyrKornetskyi]

@alvarosinmarca I have the same issue with dynamic dialog and don't know how to deal with this issue. Have you found any solutions already?

[VolodymyrKornetskyi]

@alvarosinmarca I found 2 not good ways to handle this issue. I removed focus css for first focusable item. But from source code it seems you can provide tab-index -1 and then they will skip your items. Not sure it can help you somehow.

[alvarosinmarca]

@VolodymyrKornetskyi I didn't find a solution, i will try your solution. Thank you!

[jonesisg1]

There is still an issue with autofocus="true" inside a dialog.
My bodge:

    myDialog.value = true;
    await nextTick();
    document.getElementById("myInputText").children[0].focus();

[angelo-v]

I can confirm this is still an issue, please reopen. Here is a reproducer:

https://stackblitz.com/edit/stackblitz-starters-98gaxj?file=src%2Fmain.ts

[gianluca-moro]

I am currently facing the same issue and it would be really nice if this would work without having to implement a weird workaround. Thanks.

[graficon]

Facing the same issue.