Allow manual closing of dropdown for links with preventDefault or possibly asynchronous operations

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

N/A

Reproduction URL

https://github.com/agusterodin/headless-ui-dropdown-not-disappearing-after-click-bug-reproduction

Describe your issue

I am overriding a link’s behavior with event.preventDefault() so that if the user clicks the link, logic runs to check if the user has any unsaved changes. Unfortunately, a recent update to Headless UI makes it so that the dropdown no longer disappears when clicking a link with event.preventDefault(). I could just make this a button element instead so I don’t need event.preventDefault() but then I no longer get “open in new tab” functionality and other benefits that come with using proper semantic HTML links.

https://user-images.githubusercontent.com/10248395/176752403-5a9751d2-c6a0-423c-8648-f687f38f4c55.mov

I noticed that the popover component has a close render prop for situations where you need to manually close the popover. Could we pretty please get a close render prop for Dropdown.Item as well?

Thanks in advance. I absolutely love what you have built with the Tailwind ecosystem.

[RobinMalfait]

Thanks for the issue and reproductions!

The issue: Headless UI will run its default behaviour, this means that whenever you click on a Menu.Item it will invoke whatever action is attached (invoke the onClick of a button or go to the link in case of an a) and then close the Menu.

However, we also have an escape hatch built-in where you can opt-out of default behaviour, in this case if you have an onClick={e => e.preventDefault()} then it won’t close the menu after it’s done invoking the attached action.

This is a typical problem you see with tools like Inertia’s Link component, because it intercepts the native browser action by running event.preventDefault() so that your browser doesn’t make a full page refresh. Instead, it will intercept that, and use SPA-like routing to navigate you to the new spot.

Due to this event.preventDefault(), it also means that the default behaviour of Headless UI is prevented.

The solution: What we came up with is that we now expose a close function from the Menu and Menu.Item components’ render prop for React, and a close function from the Menu and MenuItem components slot prop for Vue.

This will allow you to imperatively call the close function. For example, for Vue users it would look something like this:

<template>
  <Menu>
    <MenuButton>More</MenuButton>
    <MenuItems>
      <MenuItem v-slot="{ active, close }">
        <Link href="/" preserve-state @click="close">Inertia Link {{ active }}</Link>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

<script>
import { Link } from '@inertiajs/inertia-vue3'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'

export default {
  components: {
    Link,
    Menu,
    MenuButton,
    MenuItems,
    MenuItem,
  },
}
</script>

For React it is similar, but it is exposed from the render prop instead.

import { Menu } from '@headlessui/react'
import { MyCustomLink } from './MyCustomLink'

function MyMenu() {
  return (
    <Menu>
      <Menu.Button>Terms</Menu.Button>

      <Menu.Items>
        <Menu.Item>
          {({ close }) => (
            <MyCustomLink href="/" onClick={close}>
              Read and accept
            </MyCustomLink>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

This should be fixed by #1897, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

[prestonholt]

I also noticed this happening when an Inertia Link is used inside a MenuItem after upgrading to 1.6.6 (seems to work in 1.6.5), due to the preventDefault()