Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Closed
3 tasks done
JulienLecoq opened this issue Aug 8, 2024 · 1 comment · Fixed by #30373
Closed
3 tasks done

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

JulienLecoq opened this issue Aug 8, 2024 · 1 comment · Fixed by #30373
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@JulienLecoq
Copy link

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When putting a ion-checkbox or ion-radio inside of an ion-item, the click event on the ion-item is emitted two times when clicking on the left or right edge of the ion-item.

Expected Behavior

The click event should be emitted just once.

Steps to Reproduce

  1. Paste the following code in a page:
<ion-item (click)="onClick()">
    <ion-checkbox>Test</ion-checkbox>
</ion-item>
onClick() {
    console.log("Item clicked")
}
  1. Click on the left or right edge of the ion-item.
  2. See the double log of "Item clicked".

Code Reproduction URL

https://github.com/JulienLecoq/bug_ion-item_click/tree/main

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/julien_lecoq/.nvm/versions/node/v20.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.2.6
@angular-devkit/build-angular : 18.1.4
@angular-devkit/schematics : 18.1.4
@angular/cli : 18.1.4
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : not installed
@capacitor/core : 6.1.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.14.0 (/Users/julien_lecoq/.nvm/versions/node/v20.14.0/bin/node)
npm : 10.7.0
OS : macOS Unknown

Additional Information

No response
@ionitron-bot ionitron-bot bot added the triage label Aug 8, 2024
@JulienLecoq JulienLecoq changed the title bug: ion-item click event emitted two times bug: ion-item click event emitted two times (with ion-checkbox) Aug 9, 2024
@brandyscarney brandyscarney added package: core @ionic/core package type: bug a confirmed bug report labels Apr 25, 2025
@ionitron-bot ionitron-bot bot removed the triage label Apr 25, 2025
This was referenced Apr 25, 2025
Merged
Closed
github-merge-queue bot pushed a commit that referenced this issue Apr 30, 2025
@brandyscarney
fix(item): emit click event once when clicking padded space on item a…
7a9d138 
…nd emit correct element (#30373)

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
- [x] No

## Other information

**Dev build**: `8.5.6-dev.11745613928.16440384`

**Previews**:
- [Checkbox
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/checkbox/test/item)
- [Input
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/input/test/item)
- [Radio
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/radio/test/item)
- [Select
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/select/test/item)
- [Textarea
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/textarea/test/item)
- [Toggle
Preview](https://ionic-framework-git-fw-6503-ionic1.vercel.app/src/components/toggle/test/item)

---------

Co-authored-by: Brandy Smith <[email protected]>
@brandyscarney
Copy link
Member

This has been released in 8.5.6. If you run into any other problems please open a new issue. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
2 participants
@brandyscarney @JulienLecoq