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
IonAccordion
in the group - Create an
IonInput
in 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"
/>