Toggle menu item has no correct way to use it

[robintown]

Platform

• Web

Package version

• v4.8.0

Description

As of https://github.com/element-hq/compound-web/pull/178, the toggle menu item appears impossible to use correctly. Imagine that the toggle is controlled by const [checked, setChecked] = useState(false):

• With onChange={() => setChecked(c => !c)} and onSelect={e => e.preventDefault()}, you can toggle the state by clicking on the label text or the toggle itself, but selecting the menu item with the keyboard does nothing. Previously, this was a correct way to use the component.
• With onChange={() => setChecked(c => !c)} and onSelect={e => { e.preventDefault(); setChecked(c => !c) }}, you can toggle the state by clicking on the label text or selecting the menu item with the keyboard, but clicking the toggle itself does nothing. I believe this is because clicking the toggle triggers both event handlers, and the state gets toggled twice.

[robintown]

Looking at what Radix does for their pre-packaged toggle menu item: they avoid putting any actual \<label> or \<input> elements inside the menu item, and just rely on the ARIA attributes of the parent element. That's probably the simplest solution here.