Menu: how to close it with external action

[demiro]

So, from the documentation I can see I can get the close method through v-slot, but I don't see an example or cannot figure a way to make this work within my business logic (in script tag)..

let's check a simple example

<script setup llang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";

const menuRef = ref<any>(null);

const closeMenu = () => {
  console.log("CLOSING");
  menuRef.value?.close();
};
</script>
<template>
  <Menu as="div" :ref="menuRef" v-slot="{ close }">
    <MenuButton>menu</MenuButton>
    <MenuItems >...</MenuItems>
</Menu>
</template>

So In the example I also try to have a reference to Menu and call close method, but his one is not exposed, so it is not accessible.

even tried something like this, passing the close method from v-slot as a callback function

<script setup llang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";

const menuRef = ref<any>(null);
const closeRef = ref<any>(null);


const closeMenu = () => {
 if(closeRef.value) {
   closeRef();
 }
};
</script>
<template>
 <Menu as="div" :ref="() => closeRef = close" v-slot="{ close }">
   <MenuButton>menu</MenuButton>
   <MenuItems >...</MenuItems>
</Menu>
</template>

Any idea of how to do it?