Dropdown Menu closing @mouseleave

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.

unovue / radix-vue

Dropdown Menu closing @mouseleave #1147

Describe the feature

Additional information