fix(checkbox, radio): click event is triggered once

[sean-perkins]

Issue number: Resolves #27506

---

What is the current behavior?

Modern form controls (ion-radio, ion-checkbox) that associate a label to an input result in an additional click event, when the label is clicked.

e.g.:

<ion-checkbox onClick={() => console.log('clicked')}>
  #shadow-root
  <label>
    <input type="checkbox" />
  </label>
</ion-checkbox>

When the host is clicked, the label is the click target. When a label is associated to an input, it will trigger a click event on the control/input. This causes the event to bubble and a duplicate click event to fire.

What is the new behavior?

• Prevent the event bubbling from the inner control when the label is clicked for ion-checkbox and ion-radio
• Click events are emitted a single time for ion-checkbox and ion-radio

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 7.0.8-dev.11684439870.1ade4229

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[liamdebeasi]

Does pointer-events: none on the native element work here too? We fixed a similar bug in toggle a couple years ago: #23146

I'd prefer a CSS-only approach rather than adding even more JS.

[sean-perkins]

pointer-events: none on the inner input control continues to result in duplicate clicks. The problem is the label invokes a click event on the input and does not take into consideration the pointer events.

[liamdebeasi]

I'm fine with the changes, but do we know why this does not happen with ion-toggle?

[sean-perkins]

Removed the tests that I originally introduced. This issue does not reproduce outside of a browser environment (an emulated environment does not result in 2x events).

This issue is not present in ion-toggle because of this line: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toggle/toggle.tsx#L255. Removing it results in 2x click events.

[sean-perkins]

@mapsandapps I'm adding you for a review as well, if you have availability before end of sprint. I wasn't able to take advantage of the same pointer-events: none solution on the label container as you were with ion-select. Curious to your feedback since you worked on a similar problem and if the proposed solution aligns with what you would expect.

[liamdebeasi]

Closing as per #27506 (comment)

[brandyscarney]

@liamdebeasi Was this PR supposed to be closed too?

[liamdebeasi]

Whoops yes. Thanks!