Component: Accordion do not reset selected active Tab on new dynamic tab data

[kievsash]

Describe the bug

Scenario:

1. We create accordion with dynamic tabs (with ngFor)

  <button (click)="refreshData()">Reload data</button>
  <p-accordion [activeIndex]="0">
    <p-accordionTab [header]="tab.title" *ngFor="let tab of tabs">
      <p class="m-0">{{ tab.content }}</p>
    </p-accordionTab>
  </p-accordion>

and say press tab 3 to open it.
2. Then tabs array is changed but active tab is still tab 3 that creates bad UX (since data can be totally different).
3. No public method to drop it. Need to grab accordion instance and manually assign _activeIndex and tab.selected=false

Environment

Angular 18
Primeng 17

Reproducer

https://stackblitz.com/edit/lpeujv?file=src%2Fapp%2Faccordion-dynamic-demo.ts

Angular version

18.0.2

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.9.0

Browser(s)

Chrome

Steps to reproduce the behavior

1. Go to reproduce stackblizts
2. Open tab 3 by clicking it
3. Press Refresh button to recreate tabs array.
4. Observe tab 3 still active

Expected behavior

4. Either active tab should be 1st or all closed.
   Or
   Alternative - accordion instance public method (after grabbing instance with ViewChild) to reset active Tab

[github-actions]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[kievsash]

Here is the pr: #16838

cc @mertsincan