Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kievsash opened this issue Oct 24, 2024 · 0 comments
Open
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@kievsash
Copy link

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

  1. Either active tab should be 1st or all closed.
    Or
    Alternative - accordion instance public method (after grabbing instance with ViewChild) to reset active Tab
@kievsash kievsash added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant