Checkbox "checked" updated triggers onClick event on parent div when inside a form

[Tom-Aive]

Bug report

Current Behavior

When a checkbox is inside a <form>, any update on its checked prop will trigger an onClick event that will propagate to its parent.

Bug found while making a form with a select all checkbox that would mark all the other checkboxes as checked.
The other checkboxes were located inside <div> that were clickable.

The onClick event originates from the internal <input> used by the checkbox.

Expected behavior

The event on the internal <input> should not propagate to the parent.
It also shouldn't be triggered after an update on the checked prop.

Reproducible example

CodeSandbox example

Suggested solution

See Expected behavior.

Additional context

Might be the same issue as #3192 and #2704.

Your environment

Software	Name(s)	Version
Radix Package(s)	checkbox	1.1.2
React	n/a	17.0.1
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[paullfhc]

Hi, on my side, I avoid this issue by removing the onClick from the div, like this :

<form>
      <div>
        <Checkbox.Root checked={isChecked} onCheckedChange={setIsChecked}> 
          [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
        </Checkbox.Root>
        <span>test</span>
      </div>
</form>

[Tom-Aive]

In my case I can't because I need the whole div to be clickable (it contains other elements than the checkbox).