[FormControlLabel] Clicking on label triggers onClick twice

[rodrigofariow]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/g2tgc7yt?file=src%2FDemo.tsx
2. Click on the text "Tea"
3. Check the console. You will see the FormControlLabel onClick handler getting called twice: 1 for label, 1 for the checkbox

Current behavior

Clicking the label inside a FormControlLabel, should not trigger FormControlLabel onClick event twice.
You can see that if you click the checkbox directly, FormControlLabel onClick is called once, not twice.

This can be particularly tricky with analytics in case we forward each click on FormControlLabel to GA or posthog explicitly. It causes duplicated events.

The reason we use FormControlLabel onClick and not Checkbox onClick for this, is because we want to be sure we track any click on the "Checkbox" from a user perspective, regardless of whether they clicked on the checkbox element or the checkbox label. It should count as one click for the purpose of tracking.

Is this intended?

Expected behavior

Clicking on a label inside FormControlLabel should trigger the click once. The event should be the original event. The one from the label.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: FormControlLabel, trigger, twice

[mj12albert]

@rodrigofariow Here's a workaround: https://stackblitz.com/edit/g2tgc7yt-ams8henw?file=src%2FDemo.tsx

<FormGroup>
  <FormControlLabel
    onClick={(event) => {
      if (
        (event.target as HTMLElement).getAttribute('type') === 'checkbox'
      ) {
        console.log('FormControlLabel onClick');
      }
    }}
    control={<Checkbox defaultChecked />}
    label="Tea"
  />
</FormGroup>

[siriwatknp]

@sai6855 @ZeeshanTamboli Would you mind taking a look on this one?

[ZeeshanTamboli]

Use onChange on Checkbox instead of onClick on label. This is similar to #43058.

See discussions as to why click event occurs twice:

• https://stackoverflow.com/questions/24501497/why-the-onclick-element-will-trigger-twice-for-label-element
• https://stackoverflow.com/questions/17185265/jquery-click-event-triggers-twice-when-clicked-on-html-label

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[mj12albert]

I think there's no reason to not allow onClick on the label

Use onChange on Checkbox instead of onClick on label

The intention is not the same here, maybe it's not necessarily a bug but it's worth fixing

On second thought, the workaround is easy enough