Clicking the MenuItem doesn't close the Menu

[igbominadeveloper]

What package within Headless UI are you using?

For example: @headlessui/vue

What version of that package are you using?

For example: v1.5.0

What browser are you using?
Chrome
For example: Chrome, Safari, or N/A

Reproduction URL

Below is the code snippet of the Component:

    <Menu v-slot="{ open }">
        <div :class="[open && 'slide-down', 'keyboard-only-focus relative']">
          <MenuButton class="menu-button keyboard-only-focus">
            <span class="sr-only">Open user menu</span>
            <div class="username">{{ userName }}</div>
            <ChevronDownIcon :class="[open ? '-rotate-180' : '', 'profile-dropdown-icon']" />
          </MenuButton>
          <transition
            enter-active-class="transition ease-out duration-300"
            enter-from-class="transform opacity-0 -translate-y-5"
            enter-to-class="transform opacity-100 translate-y-0"
            leave-active-class="transition ease-out duration-300"
            leave-from-class="transform opacity-100 translate-y-0"
            leave-to-class="transform opacity-0 -translate-y-5"
          >
            <MenuItems class="menu-items">
              <p class="section-title">Menu</p>

              <div class="section-body">
                <MenuItem
                  v-for="(menuItem, index) in visibleMenuItems"
                  :key="index"
                  v-slot="{ active }"
                  as="div"
                >
                  <RouterLink
                    :to="{ name: menuItem.routeName }"
                    :class="[active ? 'rounded-md bg-gray-lightest' : '', 'menu-item']"
                  >
                    <component :is="menuItem.icon" class="menu-item-icon" />
                    {{ menuItem.displayName }}
                  </RouterLink>
                </MenuItem>
              </div>
            </MenuItems>
          </transition>
        </div>
      </Menu>

Describe your issue

Ideally, when a click outside of the menu is detected, the Menu closes automatically. I expect the same to happen when the MenuItem component inside it is clicked, it should close the menu too
Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[igbominadeveloper]

I think this PR - #1897 fixes this issue.

[igbominadeveloper]

Tested the changes merged in #1897 and I can close this issue now

[thomasowow]

Tested the changes merged in #1897 and I can close this issue now

@igbominadeveloper could you maybe share what you end up doing? Having the same issue at the moment.

Might be nice if the public instance of the component exposes those methods as well.

[igbominadeveloper]

@thomasowow here you go

 <Menu v-slot="{ close }">
// you have access to the close function here 
</Menu>