Toggleable fieldset inside another toggleable fieldset has its content visible when collapsed by deafult

[majkers]

Describe the bug

When one toggleable fieldset has another toggleable fieldset inside and thay are both collapsed by default, and when expanding the first one, then the content of the inner one is visible even though it is collapsed.

Environment

Angular 14.1 PrimenNG 14 Windows

Reproducer

https://stackblitz.com/edit/github-trkcts-tjm2ed?file=src/app/app.component.html

Angular version

14.1.0

PrimeNG version

14.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

14.17.3

Browser(s)

Chrome 103.0.5060.134

Steps to reproduce the behavior

1. go to https://github-trkcts-tjm2ed.stackblitz.io/ or https://stackblitz.com/edit/github-trkcts-tjm2ed?file=src/app/app.component.html
2. expand first fieldset
3. second fieldset is collapsed and its content is visible

Expected behavior

The content of second fieldset should be hidden when fieldset is collapsed.

The problem is when toggleable fieldset are nested one inside another.

This css is wrong:

.p-fieldset-toggleable.p-fieldset-expanded .p-toggleable-content:not(.ng-animating) {
    overflow: visible;
}

[Smorgaz]

The same error applies to panels, accordions and panelmenus and was introduced in commit f849e9d23b0c2223b6fbb516d3b0c368c927cf22.

[majkers]

Any news on that? I can't migrate to Angular 14 because of that.

[Vernon-Accela]

Seeing this on nested p-panels. I've had to write ng-deep css to override it until a fix can be delivered

[majkers]

Might be fixed in 14.0.2 as https://github.com/primefaces/primeng/issues/11848 got closed with https://github.com/primefaces/primeng/pull/11856 at least for accordion

[krtek4]

The fix for #11848 broke dropdowns inside accordions.

If a dropdown is bigger than the size of the accordion, its content isn't displayed entirely.

Instead of just removing the buggy css, something like that could be done :

.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
  overflow: visible;
}

[rosenthalj]

The fix for #11848 broke dropdowns inside accordions.

If a dropdown is bigger than the size of the accordion, its content isn't displayed entirely.

Instead of just removing the buggy css, something like that could be done :

.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
  overflow: visible;
}

Did you mean:

.p-accordion-tab-active > .p-toggleable-content:not(.ng-animating) {
    overflow: unset;
}

This change corresponds to the workaround I provided for bug #11924

[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]

Still exist in 14.2

https://stackblitz.com/edit/primeng-password-demo-4mrybd?file=src/app/app.component.ts

[majkers]

@mertsincan I can't reopen issues

[cetincakiroglu]

Hi @majkers,

The reproducer project is broken could you please update it so I can check?

The error I got;

Import error, can't find file:
/src/styles.css

[majkers]

@cetincakiroglu did you check link from my last comment? https://stackblitz.com/edit/primeng-password-demo-4mrybd?file=src%2Fapp%2Fapp.component.ts It is working just fine and is build with latest angular and PrimeNg