[bug]: Checkbox in a form with onClick on parent causes infinite state update

[Spoof14]

trafficstars

Bug report

Current Behavior

With the simple example of

function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
      <form>
        <div onClick={() => setIsChecked((prev) => !prev)}>
          <Checkbox checked={isChecked} />
          <span>test</span>
        </div>
      </form>
  )
}

The app crashed due to infinite state updates. Stopping propogation does nothing.

Expected behavior

The checkbox goes from unchecked to checked

Reproducible example

CodeSandbox Template

Suggested solution

Stop firing onClick multiple times. Perhaps make the checkbox into an actual <input type='checkbox'>

Your environment

Software	Name(s)	Version
Radix Package(s)	checkbox	1.1.2
React	n/a	18.3
Browser	chrome	130
Assistive tech
Node	n/a
npm/yarn
Operating System	windows	11

[Spoof14]

Relates to #https://github.com/radix-ui/primitives/issues/2549#issuecomment-2070021911

[CarlosVergikosk]

Same here, really annoying

[andersonba]

Same here!

[andersonba]

I found a workaround by wrapping the Checkbox.Root component with memo. See in CodeSandbox

[Tom-Aive]

Found the same (?) bug in slightly different scenario : https://github.com/radix-ui/primitives/issues/3265

[andreivictor]

Found a workaround with

onClick={(e) => {
  const target = e.target as HTMLElement;
  
  if (target.closest('input')) {
    return;
  }

  setIsChecked((prev) => !prev)
}}

[HasanMothaffar]

@andersonba This is the only solution that worked with me.