Skip to content

bug: IonInput change triggers IonAccordionGroup ionOnChange event #28794

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
nmspackman opened this issue Jan 8, 2024 · 3 comments
Closed
3 tasks done

bug: IonInput change triggers IonAccordionGroup ionOnChange event #28794

nmspackman opened this issue Jan 8, 2024 · 3 comments
Labels
holiday triage issues that were created during holiday period

Comments

@nmspackman
Copy link

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"
/>
@ionitron-bot ionitron-bot bot added the holiday triage issues that were created during holiday period label Jan 8, 2024
Copy link

ionitron-bot bot commented Jan 8, 2024

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!

@liamdebeasi liamdebeasi self-assigned this Jan 9, 2024
@liamdebeasi
Copy link
Contributor

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.

@liamdebeasi liamdebeasi closed this as not planned Won't fix, can't repro, duplicate, stale Jan 9, 2024
@liamdebeasi liamdebeasi removed their assignment Jan 9, 2024
Copy link

ionitron-bot bot commented Feb 8, 2024

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 Feb 8, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
holiday triage issues that were created during holiday period
Projects
None yet
Development

No branches or pull requests

2 participants