Helllo, as in the topic.
I have IonAccordionGroup with coupe of IonAccordions inside and I want to have in each IonAccordion header one additional button that is opening a modal.
Everything works as expected besides the fact that clicking on the button not only opens my modal but closes accordion as well.
Is there any recommended way of making this work as expected?
You can apply the stopPropagation method provided by javascript to the button method: Event.stopPropagation() - Web APIs | MDN
This does not seem to work… at least in v7. Any other suggestions?
Show your code so we can see what you’re doing wrong.
I have thoroughly documented the problem I’m facing in bug: Cannot prevent accordion from toggling · Issue #28635 · ionic-team/ionic-framework · GitHub, which includes a CodeSandbox replicating the issue.
It boils down to how React’s event system works, which causes the event handler in the inner component to run only after the event has been processed by the accordion.
Ok so Liam stated to you this is not an ionic bug but a react issue and even posted an example work around fix but wont work in your case. If you keep having issues, you got to post issue in react forums. You may have better luck there.
Yeah, sorry, I opened the issue at the same time I posted here, I didn’t really know which was the best forum for this. We can leave this thread if you want, hopefully I will get (at least) one more answer in the issue I created.
And just to be clear, the workaround provided by Liam is completely valid. I found another one which I like better (and is also documented in the issue,) so this is not blocking me in any way.
If I keep the conversation going is because, as an open source enthusiast, I like to contribute in whatever ways I find suitable. In this case, I provided some suggestions that could have a positive impact on the DX of the @ionic/react package.
What worked for me was adding “event.stopPropagation()” to the button click event. It prevents the accordion from catching the click and closing itself.