search

primefaces / community

Community Forum
0 stars 0 forks source link

Prevent accordion tab change based on a condition #920

Open thomasesh opened 5 months ago

thomasesh commented 5 months ago

Discussed in https://github.com/orgs/primefaces/discussions/917

Originally posted by **thomasesh** January 12, 2024 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?
thomasesh commented 5 months ago

I should have stated that the onToggle() method returns an Observable My changes in the accordion code call subscribe on the returned observable from that method and then based on the boolean value either does nothing or toggles the accordion tab.