You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v7.x
Current Behavior
If I have a checkbox inside of an ion-accordion element, when the checkbox is checked the accordion also fires a change event - which in my case - closes the accordion.
Expected Behavior
Events inside the accordion content should not cause the accordion change event to fire.
Steps to Reproduce
Add an ion-checkbox to the inside of the content of an ion-accordion
Add an event listener to the accordion-group
Check the box - notice the accordion group event fires
Workaround - add event.stopPropagation to the checkbox event listener
The solution to this bug is for a checkbox inside the accordion header - so the fix makes sense. However, I would not expect an item inside the content to toggle the accordion closed.
The text was updated successfully, but these errors were encountered:
Thanks for the report. I can reproduce this behavior, but Ionic is working as intended here.
ionChange events bubble, so when you add onIonChange to ion-accordion-group, you are essentially doing accordionGroupEl.addEventListener('ionChange', () => { ... });. In this case, the ionChange event from ion-checkbox is bubbling up to the ion-accordion-group, causing your ionChange callback on ion-accordion-group to fire.
You can check ev.target.tagName === 'ION-ACCORDION-GROUP' to verify that the ionChange event you are seeing is indeed coming from ion-accordion-group and not a child element.
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
If I have a checkbox inside of an ion-accordion element, when the checkbox is checked the accordion also fires a change event - which in my case - closes the accordion.
Expected Behavior
Events inside the accordion content should not cause the accordion change event to fire.
Steps to Reproduce
Workaround - add event.stopPropagation to the checkbox event listener
Code Reproduction URL
https://stackblitz.com/edit/g4jdvt?file=src%2Fmain.tsx
Ionic Info
N/A
Additional Information
#26771
The solution to this bug is for a checkbox inside the accordion header - so the fix makes sense. However, I would not expect an item inside the content to toggle the accordion closed.
The text was updated successfully, but these errors were encountered: