Primeng: Nested modal dialogs don't work

[rferrerasm]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

http://plnkr.co/edit/zjwEEtw0viqmG0gUIx5l?p=preview

Current behavior

When opening the second Dialog the blocking background covers the second Dialog itself preventing interacting with it.

Expected behavior

The second Dialog should be interactive.

Minimal reproduction of the problem with instructions

Open the two modals in the Plunkr example.

• Angular version: 4.3.3

• PrimeNG version: 4.1.3

• Browser: IE11, Chrome 60, Firefox 54

[cagataycivici]

That is because you should never nest them ;) Better to keep them separate.

[TylerBrinkley]

@cagataycivici So you don't think there's ever a good use case for nested modal dialogs? I think that's very short-sighted and limits how developers create their apps. Bootstrap supports nested modal dialogs, no problem. I don't see why PrimeNG should not.

[rferrerasm]

It would be nice to explicitly document that you can only open one level of modals.

[maluramichael]

Can we reopen this? We need multi level modal dialogs aswell.

[Gringol8]

@maluramichael i just experienced the same problem and found an easy workaround.
If you open the next p-dialog you need to set the modal attribute of the first p-dialog to false. The new dialog gets modal = true. Hope this helps!