Accordion Panel within an Accordion Panel is broken

[rosenthalj]

Describe the bug

A p-accordion within p-accordion is broken in primeNG v14.0.1.

The contents of all the p-accordionTab panels of an embedded p-accordion panel is always visible when the embedded p-accordion panel is visible

AccordionAccordionBug.mov

I believe the bug was induced by #11617 commit
f849e9d

Environment

Happens in both stackblitz and local project

Reproducer

https://stackblitz.com/edit/github-irxb1p?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.spec.ts

Angular version

14.x

PrimeNG version

14.0.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

14+

Browser(s)

All Browsers

Steps to reproduce the behavior

https://github-irxb1p.stackblitz.io

1. Expand all header tabs
2. Randomly open and close Header A and Header B tabbed panel.

• See that the contents of Header A and Header B are always visible

Expected behavior

Embedded PrimeNG Accordion panels work the same as non-embedded PrimeNG Accordions.

V14.x embedded p-accordion works the same as V13.x embedded p-accordion

[majkers]

The same as #11736?

[krtek4]

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

[gerardva]

The issue with the nested Accordions seemed to be fixed in 4.1.0 but appears to occur again in 4.1.1/4.1.2, see https://stackblitz.com/edit/angular-ivy-q8x2la?file=package.json