Files
headlessui/packages/@headlessui-react
Robin Malfait 83a5f456c3 Expose close function for Menu and Menu.Item components (#1897)
* expose `close` function for `Menu` and `Menu.Item` components

The `Menu` will already automatically close if you invoke the
`Menu.Item` (which is typically an `a` or a `button`). However you have
control over this, so if you add an explicit `onClick={e =>
e.preventDefault()}` then we respect that and don't execute the default
behavior, ergo closing the menu.

The problem occurs when you are using another component like the Inertia
`Link` component, that does have this `e.preventDefault()` built-in to
guarantee SPA-like page transitions without refreshing the browser.
Because of this, the menu will never close (unless you go to a totally
different page where the menu is not present of course).

This is where the explicit `close` function comes in, now you can use
that function to "force" close a menu, if your 3rd party tool already
bypassed the default behaviour.

This API is also how we do it in the `Popover` component for scenario's
where you can't rely on the default behaviour.

* update changelog
2022-10-04 15:49:20 +02:00
..
2022-01-31 00:10:06 +01:00
2022-09-30 11:54:08 -04:00
2022-03-09 11:24:45 +01:00

@headlessui/react

A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.

Total Downloads Latest Release License

Installation

npm install @headlessui/react

Documentation

For full documentation, visit headlessui.dev.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Headless UI on GitHub

For casual chit-chat with others using the library:

Join the Tailwind CSS Discord Server