-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v6.x, v7.x
Current Behavior
When nesting an IonInput in an IonAccordionGroup, the input change event triggers and updates the accordion groups change event.
So, code that relies on the IonAccordionGroup's ionOnChange event is called and throws errors if the types are different.
This can be resolved by calling stopPropagation or stopPropagationImmediately in the IonInput's onIonChange event.
Expected Behavior
The onIonChange events of nested input components should not trigger the surrounding IonAccordionGroup's events.
Steps to Reproduce
- Create an
IonAccordionGroup - Add
onIonChange={(e) => console.log(e.detail.value)}as a prop toIonAccordionGroup - Create an
IonAccordionin the group - Create an
IonInputin theIonAccordion
It will look something like this:

- Open up the dev tools console
- Click on the input, enter some text, then click on another section of the screen to cause the input to lose focus and trigger the change event.
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
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 or stopImmediatePropagation to the IonInput's onIonChange event.
<IonInput
aria-label="Input 1"
onIonChange={(e) => {
e.stopPropagation();
}}
placeholder="Change me"
/>
