form menu item issue

[LucasMobley]

What package within Headless UI are you using?
"@headlessui/react": "1.6.6"

What browser are you using?
Tested on Chrome and Safari

Reproduction URL - NA- in new private component library being built.

Describe your issue

I'm passing a form element as a menu item that has a method and a post request. (

Login) In the console I receive a error message "Form submission canceled because the form is not connected." I resolved this error by using the open boolean prop and setting the menu to static and toggling the menu to hidden or flex in tailwind. This works but seems like a workaround solution.
Thanks! - Lucas

[RobinMalfait]

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

For a form action, you can use something like this:

<form method="POST" action="#">
  <Menu.Item>
    <button type="submit">
      Sign out
    </button>
  </Menu.Item>
</form>

Note that the form is outside of the Menu.Item, this is because the Menu.Item expects an actionable element like a button or a where we can call .click() on.

If that doesn't work, then please provide a reproduction repo so that we can take a look.

[PetterIve]

I would expect this to work but it does not in this repro, am I doing something wrong?

https://codesandbox.io/p/sandbox/brave-haslett-c2ssrd