I’m having a problem with implementing a dynamic dialog that is to appear on mouseenter of an element and disappear on mouseleave. I’m using PrimeNG’s dynamic dialog which has a modal overlay and this causes an issue where mouseleave is immediately triggered when the overlay appears causing the dialog to disappear straight away and then come back on the mouseenter; it goes into a loop.
I was able to get around this on a button by changing the button’s z-index to be above the dynamic overlay’s z-index. However, this doesn’t seem to work on an element that’s inside a table.
See my stackblitz example where if you hover over the button works, but if you hover over the span inside the table below the button, it goes into the loop as described above. My question is how do I resolve this or if there’s a better way to fix the issue not using z-indexes? As far as I can see there’s no way to remove the overlay in the control.
Advertisement
Answer
If you don’t need the modal overlay, you can set the modal flag to false in your dialog configuration.
Like in this stackblitz example.