Skip to content

fix(item): emit click event once when clicking padded space on item and emit correct element #30373

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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

brandyscarney
Copy link
Member

@brandyscarney brandyscarney commented Apr 25, 2025

Issue number: resolves #29758 resolves #29761


What is the current behavior?

When an ion-item has a click event listener, the following issues occur:

  1. Double Click Events:
    • Clicking the padding around interactive elements (ion-checkbox, ion-toggle, ion-radio, ion-textarea, ion-input) triggers the click event twice.
  2. Incorrect Event Targets:
    • For ion-input and ion-textarea, clicking their native inputs reports the wrong element as the event target.
    • Clicking the padding within the native-wrapper of ion-input emits a separate click event with an incorrect target element.

What is the new behavior?

  • Fires firstInteractive.click() in Item for all interactives (no longer excludes input/textarea).
  • Stops immediate propagation in item when the click event is in the padding of an item, preventing two click events from firing.
  • Updates input and textarea to always emit from their host elements ion-input/ion-textarea instead of the native input elements.
  • Updates input to make the native input take up 100% height. This is necessary to avoid the native-wrapper triggering its own click event when clicking on its padding.
  • Adds e2e tests to check for the above behavior to avoid future regressions.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 8.5.6-dev.11745613928.16440384

Previews:

Copy link

vercel bot commented Apr 25, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 25, 2025 8:51pm

@github-actions github-actions bot added the package: core @ionic/core package label Apr 25, 2025
@brandyscarney brandyscarney changed the title Fw 6503 fix(item): emit click event once when clicking padded space on item and emit correct element Apr 25, 2025
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was moved to checkbox/test/item to match the other components.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is required for input, otherwise you can click on the native-wrapper and get another click event.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was moved to select/test/item to match the other components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
1 participant