accordion tabs are opened after dialog close

[averath]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review Without PRO Support: ~8-12 weeks. With PRO Support: 1 hour

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) Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/primeng-dialog-accordion-problem?file=src/app/app.component.html

Current behavior After reopen dialog all accordion tabs are expanded. After clicking on second accordion tab it's not getting closed. You have to click two times on it

Expected behavior After reopen dialog all accordion tabs should be closed or left untouched.

Minimal reproduction of the problem with instructions

1. Click show
2. Close dialog
3. Click show -> all tabs are expanded

What is the motivation / use case for changing the behavior? It's strange behaviour

Please tell us about your environment:

• Angular version: 10 - 10.2.0

• PrimeNG version: 10.0.0 - 10.0.3

• Browser: [all]

• Language: [all]

• Node (for AoT issues): node --version =

[averath]

I fixed a little by declaring scss in my component:

: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;
    }
  }
}

[kirk-clawson]

This appears to be a regression of the same bug I reported in 2018. After upgrading our app from 8.x to 11.x I noticed this same problem.

[majkers]

I fixed a little by declaring scss in my component:

: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;
    }
  }
}

But when I have an accordion inside another accordion. The inner one does not collapse now... Looks like both rules need to have !important

[francesco-gallo]

Any news about this bug? 13.x version here

[mossy426]

I still am facing this issue..

[majkers]

I think there is a big problem with PrimeNg when there is some component with expnading animation like toggleable fieldset, accordion, menu with submenu inside a component that might be hidden and reshown like dialogs or sidebar. They stay expanded on the second view even though they are not. There are many bugs related to it: https://github.com/primefaces/primeng/issues/10963 and old ones related to the same issue https://github.com/primefaces/primeng/issues/6318 etc. This is really annoying. I have to write tons of css when using toggleable fieldset inside accordion that are inside dialog!

[francesco-gallo]

I managed to solve the main graphical issue removing the animation (component config), forcing an open all followed by a close all, and then restoring the animation

[mossy426]

@francesco-gallo can you show any of what you did?

[francesco-gallo]

@francesco-gallo can you show any of what you did?

toggleSidebar() {
    this.animation = "0ms";
    setTimeout(() => {
      this.selectedArray = [true, true, true, true];
      setTimeout(() => {
        this.selectedArray = [false, false, false, false];
        setTimeout(() => {
          this.animation = "400ms cubic-bezier(0.86, 0, 0.07, 1)";
        })
      })
    });
 }

where "selectedArray" is used in the accordion tabs <p-accordionTab [transitionOptions]="animation" [(selected)]="selectedArray[0]">

[davidediak]

This is still a thing. I guess, it's related to component with animation being inside another primeng component with animation? Is there a fix/hack but also maintain the animation?

[DustinPham]

This is still a thing. I guess, it's related to component with animation being inside another primeng component with animation? Is there a fix/hack but also maintain the animation?

Did you manage to find a solution for this? I tried the above fix but it wouldn't collapse anymore and tried this:

.p-accordion .p-toggleable-content {
    overflow: hidden !important;
}

But this hides overflow for things like dropdowns.

Edit: I tried the above in opposite order and !important for all and it seems to work for now:

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

.p-accordion-tab:not(.p-accordion-tab-active) {
    .p-toggleable-content {
      height: 0 !important;
      overflow: hidden !important;
    }
}

[francesco-gallo]

I chime in again to leave a cleaner workaround

<p-accordionTab [transitionOptions]="animation" [selected]="accordionFix"> ... </p-accordionTab>
<p-accordionTab [transitionOptions]="animation" [selected]="accordionFix"> ... </p-accordionTab>
<p-accordionTab [transitionOptions]="animation" [selected]="accordionFix"> ... </p-accordionTab>

onToggleSidebar() {
  this.animation = "0ms";
  setTimeout(() => {
    this.accordionFix = true;
    setTimeout(() => {
      this.accordionFix = false;
      setTimeout(() => {
        this.animation = "400ms cubic-bezier(0.86, 0, 0.07, 1)";
      }
    })
  });
}

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[majkers]

@averath can You please verify it? I think it still exists in 14.2.1 version https://stackblitz.com/edit/primeng-dialog-accordion-problem-tqtn9k?file=package.json I opened a new one casue thiss is really annoying https://github.com/primefaces/primeng/issues/12174

[Mannlex21]

I fixed a little by declaring scss in my component:

: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;
    }
  }
}

Works for me, thank you!