Dropdown Menu closing @mouseleave

[gilles6]

Describe the feature

I have add a tag <div @mouseleave="isOpen = false"> in DropdownMenuContent to close menu onmouseleave but it's not working very well and doesn't seem to be the correct way to do it. Is there a feature for that?

<script setup lang="ts">
import { Icon } from "@iconify/vue";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const isOpen = ref(false);
const colorMode = useColorMode();
</script>

<template>
  <DropdownMenu v-model:open="isOpen" :modal="false">
    <DropdownMenuTrigger as-child>
      <Button variant="outline" @mouseover="isOpen = true">
        <Icon
          icon="radix-icons:moon"
          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
        />
        <Icon
          icon="radix-icons:sun"
          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
        />
        <span class="sr-only">Changer thème</span>
      </Button>
    </DropdownMenuTrigger>

    <DropdownMenuContent align="end">
      <div @mouseleave="isOpen = false">
        <DropdownMenuItem
          class="cursor-pointer"
          @click="colorMode.preference = 'light'"
        >
          Light
        </DropdownMenuItem>
        <DropdownMenuItem
          class="cursor-pointer"
          @click="colorMode.preference = 'dark'"
        >
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem
          class="cursor-pointer"
          @click="colorMode.preference = 'system'"
        >
          System
        </DropdownMenuItem>
      </div>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[sadeghbarati]

Hey @zernonia this thing is unclear in radix-vue documentation

How to open Popover, DropdownMenu, or any other Popover-related component with hover/pointer/press event that works perfectly on Desktop and Mobile devices

Related context about this topic but in react-spectrum discussions

adobe/react-spectrum#3482

---

https://react-spectrum.adobe.com/react-aria/interactions.html

https://react-spectrum.adobe.com/react-aria/usePress.html
https://react-spectrum.adobe.com/react-aria/useHover.html

[zernonia]

As this is more of a question, I've moved it to discussion. @gilles6 can you elaborate more by "doesn't seem to be the correct way to do it". What is not working ya? 😁

[sadeghbarati]

Sry I didn't see this @zernonia

Let start small

How to open Dropdown with hover event on Desktop and open with press/tap on Mobile
You know the hover event is not working well on touch devices, right?

ReactAria is cooked something like @react-aria/interactions which is for handling this situation can we have something like this in radix-vue

If you read this documentation you will know what I mean

https://react-spectrum.adobe.com/react-aria/interactions.html