Panels

[iRashwan]

Describe the bug

I am experiencing an issue with the p-panel component from PrimeNG when implementing nested panels. Specifically, the inner panel does not collapse as expected when the outer panel is toggled.

Steps to Reproduce:
I created an outer p-panel with the property [toggleable]="true".
Inside the outer panel, I added another p-panel with the same property [toggleable]="true".
When attempting to collapse the inner panel, it remains open despite the toggle action on the outer panel.

<p-panel header="Outer Header" [toggleable]="true">
<p-panel header="Inner Header" [toggleable]="true">

Lorem ipsum dolor sit amet...

Environment

"dependencies": {
"@angular-slider/ngx-slider": "^18.0.0",
"@angular/animations": "^16.1.7",
"@angular/cdk": "^16.1.6",
"@angular/common": "^16.1.7",
"@angular/compiler": "^16.1.7",
"@angular/core": "^16.1.7",
"@angular/forms": "^16.1.7",
"@angular/material": "^16.1.6",
"@angular/platform-browser": "^16.1.7",
"@angular/platform-browser-dynamic": "^16.1.7",
"@angular/router": "^16.1.7",
"@auth0/angular-jwt": "^5.1.2",
"@fortawesome/fontawesome-free": "^6.4.2",
"@ngrx/effects": "^16.2.0",
"@ngrx/entity": "^16.2.0",
"@ngrx/store": "^16.2.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@types/crypto-js": "^4.1.1",
"angular-google-tag-manager": "~1.5.0",
"angular-user-idle": "^4.0.0",
"bootstrap": "^5.3.0",
"crypto-js": "^4.1.1",
"moment-hijri": "^2.30.0",
"ng-otp-input": "^1.9.2",
"ngx-spinner": "~12.0.0",
"primeflex": "~3.1.0",
"primeicons": "~4.1.0",
"primeng": "~16.0.2",
"rxjs": "~6.6.0",
"tslib": "~2.3.0",
"zone.js": "~0.13.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.6",
"@angular/cli": "^16.1.6",
"@angular/compiler-cli": "^16.1.7",
"@types/jasmine": "~3.8.0",
"@types/node": "~12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.9.5"
}

Reproducer

No response

Angular version

16

PrimeNG version

16.0.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.14.2

Browser(s)

chrome

Steps to reproduce the behavior

I am experiencing an issue with the p-panel component from PrimeNG when implementing nested panels. Specifically, the inner panel does not collapse as expected when the outer panel is toggled.

Steps to Reproduce:
I created an outer p-panel with the property [toggleable]="true".
Inside the outer panel, I added another p-panel with the same property [toggleable]="true".
When attempting to collapse the inner panel, it remains open despite the toggle action on the outer panel.

<p-panel header="Outer Header" [toggleable]="true">
<p-panel header="Inner Header" [toggleable]="true">

Lorem ipsum dolor sit amet...

Expected behavior

The expected behavior for nested p-panel components in PrimeNG would be:

Independent Toggling: Each panel should be able to toggle (collapse/expand) independently of one another. When a user clicks the header of an outer panel, it should only affect the outer panel.

Visual Feedback: When the outer panel is collapsed, it should visually indicate that it is closed (e.g., by changing the header style or showing a different icon). The inner panel should remain in its current state (open or closed) unless explicitly toggled.

Logical Grouping: The inner panel should remain accessible and functional, allowing users to collapse or expand it separately.

In your case, the inner panel remains open when the outer panel is toggled, which is not the expected behavior. You would typically expect the inner panel to respond to its own toggle actions rather than being influenced by the state of the outer panel.

If the expectation was for the inner panel to collapse when the outer panel is collapsed, that would be a specific functionality that would need to be implemented manually, as it is not a default behavior in PrimeNG.