bug: ion-checkbox fires onclick twice

[corysmc]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

If an ion-checkbox has an onClick listener - it will fire onClick twice

Expected Behavior

Should only fire onClick once when you click the checkbox.

Steps to Reproduce

1. Use an IonCheckbox with an onClick
2. notice that the onClick is called twice when you click once

Code Reproduction URL

https://stackblitz.com/edit/8t9ymz?file=src%2Fmain.tsx

Ionic Info

See stackblitz repro above - not using ionic CLI

Additional Information

Maybe related - not sure: #27492

[corysmc]

Here's a vanilla reproduction as well: https://stackblitz.com/edit/jd93fs?file=index.html

[sean-perkins]

Hello @corysmc thanks for reporting this issue! I can reproduce it with both ion-checkbox and ion-radio. It happens where we have a shadow DOM web component with the modern form control syntax and a label + input.

e.g.:

<my-component>
  #shadow-root
    <label>
      <input />
    </label>
</my-component>

The label is the click target. When a label is associated with an input, it will trigger a click on the inner input, which propagates the additional click event.

[sean-perkins]

Here is a dev-build to test with: 7.0.8-dev.11684439870.1ade4229

Forked reproduction with the dev-build: https://stackblitz.com/edit/8t9ymz-6biavu?file=package.json

[corysmc]

Awesome, thanks @sean-perkins !

[liamdebeasi]

Hi everyone,

I discussed this with the team, and we have determined this is not a bug in Ionic.

This behavior is happening because the click event is being retargeted as it moves from the Shadow DOM to the Light DOM. In the case of ion-checkbox, clicking the checkbox dispatches a click on the <label>. However, clicking the label also dispatches a click on the native input inside of the label. That click event then bubbles up and gets retargeted. This results in what look like a duplicate click event but is really two separate click events.

You can see this here: https://codepen.io/liamdebeasi/pen/OJaPqpR

There appears to be duplicate click events, but calling composedPath() reveals that the click events are coming from two separate elements.

We have decided not to suppress this behavior because it would mean suppressing what the browser is designed to do.

While you can use composedPath to differentiate the events, I don't recommend doing so because this exposes component internals which are subject to change. In this case, we recommend relying on Ionic events such as ionChange. I also proposed a PR to clarify this behavior on the docs: ionic-team/ionic-docs#2992

I am going to close this, but let me know if there are any questions.