Multiple hover Menus interfering with each other - setTimeout from one menu hides another menu's content

[FujishigeTemma]

Description

When using multiple Menu components with hover-to-open functionality, the setTimeout from one menu's mouseleave event can unexpectedly close another menu's content that is currently being hovered.

Minimal Reproduction

I've created a minimal reproduction here: https://github.com/FujishigeTemma/ark-ui-multi-menu-hover-repro

Screen.Recording.2025-09-17.at.17.44.42.mov

The Problem

1. Two Menu components are configured to open on hover with a 2-second close delay (100ms in production)
2. When hovering over Menu 1, then quickly moving to Menu 2
3. Menu 1's setTimeout (set to close after 2 seconds) fires and somehow causes Menu 2's content to hide, even though Menu 2 is currently being hovered

Expected Behavior

When hover moved from 1 to 2, Menu 1 closed after 2s while Menu 2 kept open.

Actual Behavior

Menu 1's setTimeout callback appears to affect Menu 2's visibility, causing it to unexpectedly hide.

Environment

• @ark-ui/vue: ^5.25.0
• vue: ^3.5.18

Possible Cause

This might be related to how Ark UI internally manages menu instances but I didn't dig that deep.

Workaround Attempted

It was just random ideas though,

• Using RootProvider, but the issue persists.
• Using unique id on Menu.Root, but the issue persists.

Question

Is there a recommended pattern for implementing multiple hover menus that won't interfere with each other?

Thank you for your help! ❤️

[segunadebayo]

This is likely a bug in the Vue.js implementation