p-accordion: Accordion inside a p-tabView which is inside a p-dialog will appear all expanded the second time the dialog is opened.

[AIO1]

Describe the bug

Here is part of the code of the dialog:

p-dialog [(visible)]="houseModalShow" [modal]="true" [style]="{ width: '95vw', height: '95vw'}" [draggable]="false" [resizable]="false" [closeOnEscape]="false" [closable]="false" [maximizable]="true">

The code of the tabView:

    <p-tabView [scrollable]="true">
        <p-tabPanel> <!--DATOS GENERALES-->
            <ng-template pTemplate="header"> 
                <i class="pi pi-info-circle" [ngStyle]="{'margin-right.px': 8}"></i>
                <span>General data</span>
            </ng-template>
            <p-accordion class="w-full">
                <p-accordionTab>

First time the dialog window is opened they will appear like so:

The second time they will appear expanded like this (and multiple has not been enabled):

This is not the expected behaviour, they should be all collapsed when opening subsequent times the dialog.

Environment

Development

Reproducer

No response

Angular version

17

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[ashikjs]

@AIO1 can you add some stackblitz re-generatable code for this .

[AIO1]

@AIO1 can you add some stackblitz re-generatable code for this .

Here you go:
https://stackblitz.com/edit/primeng-tablevirtualscroll-demo-rhjlhx?file=src%2Fapp%2Fapp.component.html

Click the "Open window" and you will see all accordions collapsed. Close the modal window with any of the 2 buttons of the right bottom.
Open again the modal window with "Open window" and you will see both accordions expanded.

If you need anything else, just let me know.

Thanks in advance! :)

[ashikjs]

@AIO1 Ya, your right here have a issue when you use accordion in dialog it's behave worried when dialog closed and re-open.
PrimeNg team maybe will solve it soon.

but if you want, you can do a temporary solution like this.

 <p-tabView [scrollable]="false" *ngIf="aModalShow">
    <p-tabPanel>
                ******
  </p-tabPanel>
  </p-tabView>

NB: it will generate UI flicker or blink issue .

[puschie286]

solution from #9453 (comment) works (but breaks animation)