Prevent accordion tab change based on a condition

[thomasesh]

We use the accordion component to configure our settings and each tab has a separate group of settings and a submit button to save the changes on the tab. Primeng version 15.3.0.

I am implementing a feature that will pop up a confirmation dialog if the user tries to switch from or close a tab on which they have unsubmitted changes on the tab.

To do this, I use a templated header for the tab with click handler surrounding it to that will prompt before switching if there is a change on the tab. If the prompt is answered no, then the change will not occur.

This works except that the icon in the tab header is not covered by the click handler. So clicking on the icon will always change the tab regardless and not prompt.

I have a solution if I change the accordion code to take as input a "canToggle()" method, which will be used by the accordion tab to determine if toggling the tab is allowed or not. I can create a PR for this change but before I do, I want to make sure I am not missing some way to do this without changing the existing primeng accordion component.

Is there a way to do this using the existing primeng accordion component?

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly? It's difficult to suggest anything without seeing a code piece or working example.

[thomasesh]

Here is a stackblitz of the project. In a tab, if you click on the change button, and then click on the "Tab x" text of another tab header, you should get a pop asking if you want to continue. if you select cancel, then you will remain on in the same tab. If you click anywhere else on another tabs header, that tab will open with no prompt.

https://stackblitz.com/~/github.com/thomasesh/primeng-accordion-can-change

[cetincakiroglu]

Hi,

This is not supported right now, but you'll be able to do it with passthrough which we're currently working on. You need to override the click of the tab and do your logic. For that, we're working on to passthrough feature for all PrimeNG Components. We're planning to deliver it within the first quarter of 2024.

[thomasesh]

Any update on the "passthrough" feature mentioned above will be delivered?