Default Switch to type="button"

[ulken]

Problem

Ran into an interesting behavior where hitting Enter on/in another form field toggled the switch state. To be clear: the switch was not focused.

Demo

Cause

After some digging, I found the reason to be: a <button> inside a <form> is implicitly assigned type="submit" if nothing else is specified. Hitting Enter inside a <form> triggers a click on the first submit (implicit or not) button in the form. Since, in my case, the <Switch> is the first such button of the form and there's an onClick handler assigned, the <Switch> is toggled.

Workaround

Explicitly set <Switch type="button">.

Solution

When <Switch> is rendered as <button> (as per default), explicitly set type="button" by default.

Rationale

I can't think of a valid reason the current behavior is ever desired.

[ulken]

I'd be happy to supply a PR if you're onboard.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

I implemented it myself here #192 however I marked you as a co-author!

[Kalissaac]

This issue also seems to occur if the as type is not specified to be button explicitly: https://codesandbox.io/s/headlessuireact-switch-example-forked-yjn8i (on the latest 0.3.1 version of headlessui)

If the as prop is not passed it defaults to button, however in that case the type prop is not passed to the element. Is there a way for the type prop to be passed if as and type are not explicitly specified?