PrimeNG not able to open multiple dynamic dialogs(nested) with same component

I am trying to open the DynamicDialog with component ProductListDemo. Once the ProductListDemo dialog opens then there is one more button on dialog itself which again open the ProductListDemo component as nested dialog. First time ProductListDemo dialog open fine, but when I try to open the ProductListDemo again from the button present on ProductListDemo dialog. It doesn't open the dialog and dialogService.open return null.

ProductService.ts has dialogService to open the dialog component. Below is the stackblitz for the same.

Stackblitz

Click on Select Product opens dialog-

Click on Select Product

But when I click Nested Dialog button on Dialog it doesn't open

Please help me to resolve this issue. It was working fine with primeNG version v14.x but not working with primeNG v17.x

I have tried to open the Dialog from ProductService.ts

Solution

I check the source code through debugger, you can use the duplicate property to open the same dialog component multiple times, else it is stopping the dialog from opening.

  openDialog() {
    let dialog = this.dialogService.open(ProductListDemo, {
      header: 'Select a Product',
      width: '50vw',
      contentStyle: { overflow: 'auto' },
      breakpoints: {
        '960px': '75vw',
        '640px': '90vw',
      },
      duplicate: true, // <- changed here!
    });
    console.log('dialog::', dialog);
  }

PrimeNG not able to open multiple dynamic dialogs(nested) with same component

Stackblitz Demo