Skip to content

bug: unexpected ionChange emit with wrong event data #27986

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
loopezz opened this issue Aug 14, 2023 · 3 comments
Closed
3 tasks done

bug: unexpected ionChange emit with wrong event data #27986

loopezz opened this issue Aug 14, 2023 · 3 comments
Labels

Comments

@loopezz
Copy link

loopezz commented Aug 14, 2023

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

ionChange on ion-radio-group is being trigger with wrong event data when used with ion-accordion-group as child element and after clicking on an ion-accordion element to toggle the accordion.

Expected Behavior

It must not emit the ionChange of the ion-radio-group because the selected radio is unchanged.

Steps to Reproduce

  1. Go to https://stackblitz.com/edit/ionic7-highlight-issue-y3pfzf?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Findex.html
  2. Open console log;
  3. Click on a radio button;
  4. Confirm the ionChange is being trigger in the console log;
  5. Toggle an accordion;
  6. Check the console log once again.

Code Reproduction URL

No response

Ionic Info

Additional Information

No response

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

liamdebeasi commented Aug 14, 2023

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The ionChange event bubbles. This means that when ion-accordion-group fires an ionChange event then it will bubble up, and the ionChange handler on ion-radio-group will fire too.

ion-radio-group is not emitting an ionChange event with an invalid value. Instead, your (ionChange) listener on ion-radio-group is responding to the ionChange event that is bubbling from ion-accordion-group. Your logRadioGroupChanged code should be updated to only run if the event target is the radio group:

logRadioGroupChanged(event: any) {
  if (event.target.tagName === 'ION-RADIO-GROUP') {
    console.log('Radio group changed:', event.detail.value);
  }
}

edit: I am updating the docs to clarify this behavior: ionic-team/ionic-docs#3085

@liamdebeasi liamdebeasi closed this as not planned Won't fix, can't repro, duplicate, stale Aug 14, 2023
@liamdebeasi liamdebeasi removed their assignment Aug 14, 2023
@liamdebeasi
Copy link
Contributor

You can also prevent this bubbling by calling event.stopPropagation() on your ion-accordion-group ionChange handler.

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 13, 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 Sep 13, 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