ng-bootstrap / ng-bootstrap/ng-bootstrap

ngbAccordionCollapse does not collapse when ngbAccordionItem is disabled

Open
#4,667 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: accordion needs: design type: regression
Dominant language
TypeScript
Stars
8.2k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

Bug description:

When an ngbAccordionItem is disabled, the ngbAccordionCollapse is not collapsed (and the content is not disabled). This is a breaking change from the component-based accordion.

Compare the "Custom header" demo in the current version with the old release (https://ng-bootstrap.github.io/releases/13.x/#/components/accordion/examples).

Link to minimally-working StackBlitz that reproduces the issue:

Based on the default "Custom header" demo: https://stackblitz.com/edit/angular-oz5acv?file=src%2Fapp%2Faccordion-header.html,src%2Fapp%2Faccordion-header.ts:

  • Open the third panel
  • The button can be clicked
  • Click on the "Disable third" button on the second panel
  • The third panel's header is disabled, but the panel remains open, and the button can be clicked!
Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 17.0.9

ng-bootstrap: 16.0.0

Bootstrap: 5.3.2

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue using the StackBlitz files src/app/accordion-header.html and src/app/accordion-header.ts: open the third panel, then disable it from the second panel. Trace the accordion item and collapse behavior in the ng-bootstrap source, and verify that disabling an open item collapses its panel and prevents interaction with its content.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, bootstrap, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.