Autofocus

[VladShupik]

Describe the bug

Hello! I am using your library. And I have one problem when I use your DynamicPopupComponent and inside it I have an input with your directives pInputText pAutofocus [autofocus]=true. After popup opened, focus leave input element and set to "x" button in top-right corner. This is not very convenient, have to come up with own implementation : like write own ngAfterContentChecked() and set forcibly focus on your pInputText element.

Environment

Local

Reproducer

No response

Angular version

15

PrimeNG version

15.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[brKlaus]

Having the same issue. It seems related to the "fix" done here #12571

[Raasec]

Ive have the same issue on dynamic dialog

[jucasoft]

Hi, could you release the same solution for version 15?
For now we have solved it by returning to version 15.1.1
the focus() method has changed several times, the most complete version is that of v16, which should be copied into version 15.4.1 and republished.

v15.1.1 in this version it takes the attribute with the [autofocus] directive and it works for me.

focus() {
    let focusable = DomHandler.findSingle(this.container, '[autofocus]');
    if (focusable) {
        this.zone.runOutsideAngular(() => {
            setTimeout(() => focusable.focus(), 5);
        });
    }
}

v15.4.1 takes the first element among the focusable ones, in my case it doesn't work well, it puts the focus in the button at the top right for closing:

focus() {
    const focusable = DomHandler.getFocusableElements(this.container);
    if (focusable && focusable.length > 0) {
        this.zone.runOutsideAngular(() => {
            setTimeout(() => focusable[0].focus(), 5);
        });
    }
}

16.3.1 in this version, the focus() method completely manages the focus, it should be copied to a new version 15 and republished, if you do this you will make me a happy programmer.

focus() {
    const autoFocusElement = DomHandler.findSingle(this.container, '[autofocus]');
    if (autoFocusElement) {
        this.zone.runOutsideAngular(() => {
            setTimeout(() => autoFocusElement.focus(), 5);
        });

        return;
    }

    const focusableElements = DomHandler.getFocusableElements(this.container);
    if (focusableElements && focusableElements.length > 0) {
        this.zone.runOutsideAngular(() => {
            setTimeout(() => focusableElements[0].focus(), 5);
        });
    }
}