Skip to content

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

Merged
brandyscarney merged 11 commits into
mainfrom
FW-6503
Apr 30, 2025
Merged

fix(item): emit click event once when clicking padded space on item and emit correct element#30373
brandyscarney merged 11 commits into
mainfrom
FW-6503

Conversation

@brandyscarney
Copy link
Copy Markdown
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
Copy Markdown

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
Comment thread core/src/components/checkbox/test/basic/checkbox.e2e.ts
Comment thread core/src/components/input/input.scss
Comment thread core/src/components/select/test/basic/select.e2e.ts
Copy link
Copy Markdown
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
Copy Markdown
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

Comment thread core/src/components/input/test/item/index.html Outdated
Comment thread core/src/components/input/input.tsx
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
Copy Markdown

Super cool! :D

pull Bot pushed a commit to LoadsAForks/ionic-framework that referenced this pull request May 8, 2026
…ic-team#31124)

Issue number: resolves ionic-team#30412

---------
## What is the current behavior?

When a user listener bound to `ion-input` or `ion-item` receives a tap
that requires scroll assist to scroll the input into view, the click
handler fires twice. Programmatic `setFocus()` and keyboard focus into
an offscreen input also dispatch a phantom click event the developer
didn't request.

The cause is `scroll-assist.ts`: after `relocateInput` moves the native
input, a RAF-scheduled `componentEl.click()` re-emits a click on the
host. That recovery was added in ionic-team#22845 (Feb 2021) to fix ionic-team#21871, when
scroll assist drove focus from its own touchstart/touchend listeners and
`relocateInput` ran during the in-flight click event's lifecycle.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

The RAF recovery click is removed. ionic-team#25848 (Sep 2022) restructured scroll
assist to react to `focusin` rather than drive focus from touch events,
so `relocateInput` now runs strictly after the click event has finished
propagating. Combined with `ion-input`'s click capture handler and
`ion-item`'s click-on-padding handler from ionic-team#30373 (April 2025), the
click is always dispatched on the component host before scroll assist
runs. Re-firing it produced duplicate clicks for user interactions and
phantom clicks for programmatic and keyboard focus.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


Regression coverage in
`core/src/components/input/test/item/scroll-assist-double-click.e2e.ts`
covers four cases on iOS Mobile Safari and Mobile Chrome: padding click,
direct input click, programmatic `setFocus()`, and keyboard focus. The
first two assert one click event; the last two assert zero. All four
fail without this change and pass with it.

Preview:
-
https://ionic-framework-git-fw-6540-ionic1.vercel.app/src/utils/input-shims/hacks/test?ionic:mode=ios
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)

4 participants