Skip to content

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:

@vercel
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 30, 2025 5:05pm

@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
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

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

Looks good! I only had two comments, but I they're more just for my own confirmation than change requests

Merged via the queue into main with commit 7a9d138 Apr 30, 2025
50 checks passed
@brandyscarney brandyscarney deleted the FW-6503 branch April 30, 2025 17:22
@JulienLecoq
Copy link

Super cool! :D

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

Development

Successfully merging this pull request may close these issues.

bug: ion-item click event emitted two times (with ion-input) bug: ion-item click event emitted two times (with ion-checkbox)

5 participants