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
Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!
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-input 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
v6.x, v7.x
Current Behavior
When nesting an
IonInput
in anIonAccordionGroup
, the input change event triggers and updates the accordion groups change event.So, code that relies on the
IonAccordionGroup
'sionOnChange
event is called and throws errors if the types are different.This can be resolved by calling
stopPropagation
orstopPropagationImmediately
in theIonInput
'sonIonChange
event.Expected Behavior
The
onIonChange
events of nested input components should not trigger the surroundingIonAccordionGroup
's events.Steps to Reproduce
IonAccordionGroup
onIonChange={(e) => console.log(e.detail.value)}
as a prop toIonAccordionGroup
IonAccordion
in the groupIonInput
in theIonAccordion
It will look something like this:

Expected Behavior:
The console should be empty (the accordion group's event isn't triggered).
Actual Behavior:
The console shows the input value (the accordion group's event is triggered).
Note: The screenshots included display the accordion group's value history.
Code Reproduction URL
https://codesandbox.io/p/sandbox/accordion-group-onionchange-z8kycp?file=%2Fsrc%2Fpages%2FHomePage.tsx%3A54%2C46
Ionic Info
N/A
Additional Information
The codebase I work in is using v7 and the example is using v6.
To workaround, I can just add
stopPropagation
orstopImmediatePropagation
to theIonInput
'sonIonChange
event.The text was updated successfully, but these errors were encountered: