Primeng: Dialog should focus first element on open

[cagataycivici]

[vigalo]

There is a problem with this. When a dropdown is the first component, this autofocus causes an error

Expression has changed after it was checked. Previous value: 'ui-inputwrapper-filled: undefined'. Current value: 'ui-inputwrapper-filled: true'

[Pikadili83]

I have the same problem, my first element is p-calendar. I think that this feature should be optional.

[bobbydowling]

Same here

[jboothe]

I'm having the same problem with the p-calendar. Any word on a resolution?

[andyg3]

I just ran into this as well.
A hacky workaround: add this before your first element:

Obviously, a real fix is needed.

[sridhark158]

check this link https://plnkr.co/edit/g7ureOse1EQlRwUpriHt?p=preview added autofocus attribute but it works only once , only chrome browser

[ctrl-brk]

Here's my version of the "autofocus" directive. It refers to my custom components but you can replace it with whatever you need

@Directive({ selector: '[appAutoFocus]' })
export class AutoFocusDirective implements AfterViewInit {
    private _show = true;

    constructor(
        private _ref: ElementRef,
        @Host() @Self() @Optional() private _it: InputTextComponent,
        @Host() @Self() @Optional() private _cb: ComboboxComponent,
        @Host() @Self() @Optional() private _cs: CompanySearchComponent,
        @Host() @Self() @Optional() private _fs: FileSearchComponent,
    ) {}

    @Input() set appAutoFocus(show: boolean | string) {
        if (typeof(show) === 'boolean') //typeof is string if parameter not specified
            this._show = show;
    }

    ngAfterViewInit(): void {
        if (!this._show) return;

        let el: HTMLElement;
        if (this._it)
            el = this._it.nativeElement;
        else if (this._cb)
            el = this._cb.nativeInputElement;
        else if (this._cs)
            el = this._cs.nativeInputElement;
        else if (this._fs)
            el = this._fs.nativeInputElement;
        else
            el = this._ref.nativeElement;

        el.focus();
    }
}

[sridhark158]

Hi @ctrl-brk InputTextComponent,ComboboxComponent,CompanySearchComponent,FileSearchComponent,
i got error with this components should i import these components?

[nk6]

@cagataycivici
Commit https://github.com/primefaces/primeng/commit/5687458e77ded2848c09b7c668533ab707f28791 is tagged with 6.1, but the release does not contain this commit.
Is there a timeline for this fix/feature?

[rohkoli94]

By default focusOnShow is TRUE. i.e first button receives focus on show.
set [focusOnShow]="false".
Cheers!

[nk6]

The Commit which 'closed' this issue never made it to the master, as you can see in Line 226 of dialog.ts.

From my point of view the desired behaviour should be that the first element of type 'button, input, textarea, select' should be focused (as in the commit). So if the first focusable element in the dialog is an input field it should get the focus.

@cagataycivici
Is there a chance that this fix is going to the master?