Primeng: Bug with overlaypanel in 4.3.0

Created on 31 Oct 2017 · 11Comments · Source: primefaces/primeng

I have a delete confirmation overlaypanel that appears when clicking an "X" icon in my app. it is inside a p-dialog component if that matters...

after updating to primeNG 4.3.0 the overlaypanel no longer appears. Upon inspection, it appears that it is not toggling display: none to display: block as it normally should. Are you able to reproduce?

defect pending-review

Source

dhniels

👍3

Most helpful comment

@cagataycivici - We've the same issue with p-overlayPanel. It happens only for some of components on our application, especially when not using appendTo. I couldn't reproduce this on components other than broken ones yet, but I can see that it gets fixed when adding appendTo to the broken components.

I had to apply a workaround like the following to come over this issue.

<button (click)="togglePanel($event)">Test</button>

```typescript
function togglePanel(event: any) {
this.overlayPanel.toggle(event);
this.overlayPanel.el.nativeElement.classList.toggle('menu-open');
}

```css
.menu-open {
  display: block !important;
}

mronus on 6 Nov 2017

👍3 ❤1

All 11 comments

Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=info

cagataycivici on 6 Nov 2017

👎1

I had to apply a workaround like the following to come over this issue.

<button (click)="togglePanel($event)">Test</button>

```typescript
function togglePanel(event: any) {
this.overlayPanel.toggle(event);
this.overlayPanel.el.nativeElement.classList.toggle('menu-open');
}

```css
.menu-open {
  display: block !important;
}

mronus on 6 Nov 2017

👍3 ❤1

We also have this issue, I'll try to create a plnkr for it.

richteri on 6 Nov 2017

👍1

@mronus I'm having the exact same behavior as yours. Applying appendTo body fixes it, as does your fix. Definitely a bug introduced in 4.3.0 somewhere.

dhniels on 10 Nov 2017

Still have this bug in PrimeNG 5. updated to 5.0.2 and the issue persists. I tried recreating the bug in plunker but have been unsuccessful. There is certainly something going on in my app, if Prime is willing to reach out to me and address this issue, I'd be happy to screenshare.

dhniels on 27 Nov 2017

@cagataycivici please re-open this issue.

i was finally able to create a working example of the bug. See the Plunker.

It appears that if the overlaypanel has position:fixed it breaks the toggle between display: none and display: block, or at least, I think this is the culprit, because if I change it to position: absolute, it then works correctly. Please investigate.

dhniels on 28 Nov 2017

the same issue
in 4.2 this code can show overlayPanel.
this.overlayPanel.show(null, this.contentRef.nativeElement)
but in 4.3.0 it not working,
even give click event parameter, the overlayPanel is still display:none.

rikan on 30 Nov 2017

👍1

no response in a over a month on this issue. sometimes i wonder if the primeNG team just cherrypicks issues and closes ones they dont want to deal with because there is broken functionality all over the place that is completely unaddressed. When I create issues they are immediately closed and never looked at again 50% of the time. Im beginning to regret my choice using PrimeNG in my application. if this is the way they run their product I certainly will be staying away from the Pro upgrade, which I had strongly considered until recently. I don't mean to sound ungrateful as they are doing a valuable service, I am just incredibly disappointed what feels like complete disinterest in handling bugs for their users.

dhniels on 1 Dec 2017

I'm still having this issue in PrimeNG 5.2.4... 6 months later.... For what its worth I tested with both Chrome and Firefox, and I could only replicate it in Chrome. Same applies for the plunker i created above.

dhniels on 16 Apr 2018

Set to review for 5.2.5

cagataycivici on 16 Apr 2018

🎉1 👍1

PrimeNG 5.2.7 still has this problem. Please, help