PrimeNG Accordion: Gets open on second time opening inside dialog or overlay

Question

I have following code:

<button pButton type="text" label="Show Overlay" (click)="op.toggle($event)"><\/button>
<p-overlayPanel #op>
   <p-accordion multiple="true">
      <p-accordionTab header="Header 1">Content 1<\/p-accordionTab>
      <p-accordionTab header="Header 2">Content 2<\/p-accordionTab>
   <\/p-accordion>
<\/p-overlayPanel>

After page load, When I click first time on button overlay open as expected, but the problem is when click second time accordion gets expanded (content visible but shows collapse icons).

Angular version - 7.x.x
Primeng version- 7.x.x

Answer 1

I faced same the issue. Its some bug in Angular / PrimeNG. This workaround from https://github.com/primefaces/primeng/issues/9453 worked for me:

:host ::ng-deep {
  .p-accordion-tab:not(.p-accordion-tab-active) {
    .p-toggleable-content {
      height: 0;
      overflow: hidden;
    }
  }

  .p-accordion-tab.p-accordion-tab-active {
    .p-toggleable-content {
      height: auto !important;
      overflow: auto !important;
    }
  }
}

In component hosting accordion just:

styleUrls: ['./some-name.component.scss']