p-accordion not fetching correct index of the accordion tab with onOpen event while using nested p-accordion

[dibyendusaha]

Describe the bug

Trying to replicate the scenario though below diagram:

⬇️ Accordion 1

• Accordion 1.1

  • Accordion 1.1.1
  • Accordion 1.1.2
  • Accordion 1.1.3
  • Accordion 1.1.4

• Accordion 1.2

  • Accordion 1.2.1
  • Accordion 1.2.2
  • Accordion 1.2.3

⬇️ Accordion 2

• Accordion 2.1

  • Accordion 2.1.1
  • Accordion 2.1.2

Expected behaviour is: When I am opening Accordion 1, then onOpen event should return event.index as 0 - it is returning as expected ✅ When I am opening Accordion 2, then onOpen event should return event.index as 1 - it is not happening ❌, rather it is returning 10

I have provided more detailed description in "Steps to reproduce the behaviour" and "Expected behaviour".

Environment

This is happening since PrimeNG version 16 and above. Problem with the index of p-accordionTab when used in multilevel, i.e. when using nested p-accordion as child content of parent p-accordion. Not returning the actual index rather it is returning index calculating all the related accordion be it parent or child content.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-jhq5ug

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

No response

Steps to reproduce the behavior

Need to have multilevel primeng accordion. Now click on the first parent accordion, onOpen event will return correct event.index. After that, click 2nd parent accordion, expected behaviour is onOpen event will return event.index as 1, whereas it is not returning the correct index rather it is considering all the child p-accordion of first parent and returning the value for the index of 2nd parent accordion.

Expected behavior

Parent level accordion should not consider child-level accordion while returning the index with onOpen event. It will only return the index of the corresponding parent accordion. E.g. If there are 3 parent p-accordion, and each parent have another 3 p-accordion as child content, then on clicking of the 3rd parent accordion, onOpen event should return event.index as 2 not 8 (0 - for 1st parent accordion, 1,2,3 - for child p-accordion of 1st parent, 4 - for 2nd parent accordion, 5,6,7 - for child p-accordion of 2nd parent, 8 - for 3rd parent accordion).

[CJTurpie]

We are also having this issue currently, the issue is just as @dibyendusaha describes

[miclausandrei]

Same issue for me.

As a workaround:

1. Hide the nested accordions and display them only when the parent accordion tab is selected.
2. Replace the onOpen/onClose events from accordion with selectedChange event from accordion tab where you can pass the correct tab index.

<p-accordion> <p-accordionTab header="Header I" *ngFor="let tab of tabs; let index=index" (selectedChange)="selectedChange($event, index, tab)"> <p-accordion *ngIf="tab.selected"> <p-accordionTab header="Header {{index}}" > <p>Lorem ipsum dolor sit amet...</p> </p-accordionTab> </p-accordion> </p-accordionTab> </p-accordion>

selectedChange(opened: boolean, accordionTabIndex: number, tab: any) { if (!opened) { // Accordion tab closed tab.selected = false; // Hide nested accordion return; } // Accordion tab opened tab.selected = true; //Show nested accordion }