Skip to content

bug: checkbox inside an accordion content causes the accordion onIonChange event to fire #27724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks done
corysmc opened this issue Jun 30, 2023 · 3 comments
Closed
3 tasks done
Labels

Comments

@corysmc
Copy link
Contributor

corysmc commented Jun 30, 2023

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

  1. Add an ion-checkbox to the inside of the content of an ion-accordion
  2. Add an event listener to the accordion-group
  3. Check the box - notice the accordion group event fires

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.

@ionitron-bot ionitron-bot bot added the triage label Jun 30, 2023
@liamdebeasi liamdebeasi self-assigned this Jun 30, 2023
@liamdebeasi
Copy link
Contributor

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.

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Jun 30, 2023
@liamdebeasi liamdebeasi removed their assignment Jun 30, 2023
@ionitron-bot ionitron-bot bot removed the triage label Jun 30, 2023
@corysmc
Copy link
Contributor Author

corysmc commented Jul 3, 2023

Thanks for the explanation 👍

@corysmc corysmc closed this as completed Jul 3, 2023
@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Jul 3, 2023
@ionitron-bot
Copy link

ionitron-bot bot commented Aug 2, 2023

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Aug 2, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants