Open
Description
Following the example here to submit a form inside a dropdown https://headlessui.com/react/menu#using-with-buttons
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
function Example() {
function showSettingsDialog() {
alert('Open settings dialog!')
}
return (
<Menu>
<MenuButton>My account</MenuButton>
<MenuItems anchor="bottom">
<MenuItem>
<button onClick={showSettingsDialog} className="block w-full text-left data-[focus]:bg-blue-100">
Settings
</button>
</MenuItem>
<MenuItem>
<a className="block data-[focus]:bg-blue-100" href="/support">
Support
</a>
</MenuItem>
<MenuItem>
<a className="block data-[focus]:bg-blue-100" href="/license">
License
</a>
</MenuItem>
<form action="/logout" method="post">
<MenuItem>
<button type="submit" className="block w-full text-left data-[focus]:bg-blue-100">
Sign out
</button>
</MenuItem>
</form>
</MenuItems>
</Menu>
)
}
Attempting to submit this form generates:
Form submission canceled because the form is not connected
Reproducible example using the code from docs: https://stackblitz.com/edit/vitejs-vite-htf44j?file=src%2FApp.tsx
Check the console to see the warning logged
Metadata
Metadata
Assignees
Labels
No labels