DynamicDialog - RangeError: Maximum call stack size exceeded

[stevenrlp]

Describe the bug

Using the latest version of PrimeNG and I am trying to use the dynamic dialog and I am receiving the following error message:

core.mjs:6672 ERROR RangeError: Maximum call stack size exceeded
    at _DomHandler.getFocusableElement (primeng-dom.mjs:519:10)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1014:32)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)
    at _DynamicDialogComponent.focus (primeng-dynamicdialog.mjs:1030:12)

A quick google shows that this is a common error in other versions of PrimeNG but I don't see anything listed for PrimeNG 19 so though I would raise the issue.

If you set focusOnShow: false the error will not show.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-tyawoxvu?file=README.md

Environment

Angular CLI: 19.0.6
Node: 22.13.0
Package Manager: npm 11.0.0
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.6 (cli-only)
@angular-devkit/core         19.0.6 (cli-only)
@angular-devkit/schematics   19.0.6 (cli-only)
@schematics/angular          19.0.6 (cli-only)

    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primeng": "^19.0.5",

Angular version

19.0.6

PrimeNG version

v19

Node version

22.13.0

Browser(s)

Chrome

Steps to reproduce the behavior

    import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';

    private readonly dialogService = inject(DialogService);

    public openDialog() {
        this.ref = this.dialogService.open(DynamicDialogDemo,{focusOnShow: true, header: 'test'});
    }

import { Component } from '@angular/core';

@Component({
    template: `hello`,
})
export class DynamicDialogDemo {

}

Expected behavior

No error message in console

[stevenrlp]

I have just discovered that if you have a template like below which I was testing with you get the error:

    template: `

          hello

    `,

But if you use html elements then the error goes away, I must assume the focus is trying to find the first element and as there is only a string value in the content it can't find an element so throws an error.

I tested just now with the below and no error is produced:

    template: `

    <span class="p-text-secondary block mb-8">Update your information.</span>
    <div class="flex items-center gap-4 mb-4">
        <label for="username" class="font-semibold w-24">Username</label>
        <input pInputText id="username" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex items-center gap-4 mb-8">
        <label for="email" class="font-semibold w-24">Email</label>
        <input pInputText id="email" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex justify-end gap-2">
        <!-- <p-button label="Cancel" severity="secondary" (click)="visible = false" />
        <p-button label="Save" (click)="visible = false" /> -->
    </div>

    `,

[sergiosierram]

If you are in need of using the dialog without any focusable content, you can use:

focusOnShow: false,

this will make the error go away. However, it does not solve the real problem behind