Skip to content

bug: IonInput change triggers IonAccordionGroup ionOnChange event #28794

Closed as not planned
@nmspackman

Description

@nmspackman

Prerequisites

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

  1. Create an IonAccordionGroup
  2. Add onIonChange={(e) => console.log(e.detail.value)} as a prop to IonAccordionGroup
  3. Create an IonAccordion in the group
  4. Create an IonInput in the IonAccordion

It will look something like this:
image

  1. Open up the dev tools console
  2. 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).

image

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 or stopImmediatePropagation to the IonInput's onIonChange event.

<IonInput
    aria-label="Input 1"
    onIonChange={(e) => {
        e.stopPropagation();
    }}
    placeholder="Change me"
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    holiday triageissues that were created during holiday period

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions