Component: Accordion

[dcrawshay]

Describe the bug

An Accordion Tab cannot be toggled anymore by clicking on the chevron or the text in the header. This stopped working after fix for #15837 was committed a few days ago. Now the only way to toggle the visibility of an Accordion Tab's content is to click in the whitespace around the elements in the tab header (ie. not on the text or chevron).

Environment

MacOS 14.5

Reproducer

https://primeng.org/accordion

Angular version

18.0.0

PrimeNG version

17.18.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.14.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://primeng.org/accordion
2. Click directly on "Header I" text or chevron button to toggle the first tab. It will not toggle.

Expected behavior

An Accordion Tab should toggle when clicking on text or chevron.

[rosenthalj]

@mehmetcetin01140
@cetincakiroglu

I believe that Issue #15837 is invalid and PR #15838 should be reverted.

By reverting PR #15838, this Issue #15851 will be fixed.

To fix issue #15837 the developer should have stopped the event propagation in the button component after a click. Since issue #15837 did not provide a reproducer, I can not completely confirm this.

See the following examples about stopping event propagation:
https://www.w3schools.com/jsref/event_stoppropagation.asp
https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation
https://stackoverflow.com/questions/59993208/how-to-prevent-event-bubbling-in-angular-8

[adri95cadiz]

@rosenthalj This is exactly how it should be approached, as anything can be in the header template.

In fact even in the PrimeNg website this error is apparent, the accordion should be opened whenever you click on the header, except cases where the developer deliberately stops the click propagation.

Otherwise there is no workaround, at least that I know of, to replicate the desired behaviour that existed before.

[rosenthalj]

Issue #15859 is a duplicate of this Issue #15851

PR #15867 fixes this Issue #15851 and Issue #15859.
PR #15867 reverts PR #15838 which broke the Accordion Header functionality

[meriturva]

Any ETA? we have already migrated to Angular 18 and downgrading to v17.17 seems quite annoying now.
Likely we are not in production yet but the QA team is doing a few tests.

So thanks.

[adri95cadiz]

Any ETA? we have already migrated to Angular 18 and downgrading to v17.17 seems quite annoying now. Likely we are not in production yet but the QA team is doing a few tests.

So thanks.

In our application we are using PrimeNG 17.18.0 and Angular v18.0.3 and it's being pretty stable at the moment, this issue is not existing in this version just in version 17.18.1, so I think you should be able to downgrade to version 17.18.0 without any problem and without having to downgrade Angular.

[meriturva]

Thanks @adri95cadiz I have to check again because QA reported the same issue even with version 17.18.0

[JimTudeski]

same happened with me today

[riker09]

In our application we are using PrimeNG 17.18.0 and Angular v18.0.3 and it's being pretty stable at the moment, this issue is not existing in this version just in version 17.18.1, so I think you should be able to downgrade to version 17.18.0 without any problem and without having to downgrade Angular.

I can confirm that downgrading primeng to version 17.18.0 does work. The conflicting PR was merged with 17.18.1.

[EDIT]
I'm on Angular version 17:

npx ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.3.6
Node: 20.12.2
Package Manager: npm 10.5.0
OS: win32 x64

Angular: 17.3.6
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.6
@angular-devkit/build-angular   17.3.6
@angular-devkit/core            17.3.6
@angular-devkit/schematics      17.3.6
@schematics/angular             17.3.6
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.4

[graphicsxp]

I have upgraded to Angular 18.0.4 and primeNG 17.18.1 and I have the same issue, I.E clicking on text or chevron does not expand/collapse accordion.

However, downgrading to primeNG 17.18.0 or even 17.17.0 does not solve this problem for me.

[rokamon1997]

I have upgraded to Angular 18.0.4 and primeNG 17.18.1 and I have the same issue, I.E clicking on text or chevron does not expand/collapse accordion.

However, downgrading to primeNG 17.18.0 or even 17.17.0 does not solve this problem for me.

Be sure to delete package-lock.json file and node_modules folder. Than reinstall (with primeng version 17.18.0) and it should work.

[graphicsxp]

I have upgraded to Angular 18.0.4 and primeNG 17.18.1 and I have the same issue, I.E clicking on text or chevron does not expand/collapse accordion.
However, downgrading to primeNG 17.18.0 or even 17.17.0 does not solve this problem for me.

Be sure to delete package-lock.json file and node_modules folder. Than reinstall (with primeng version 17.18.0) and it should work.

Thanks, you are right.