NavigationMenu inconsistent behavior with `openOnHover` and `forceMount` props

[heyharvest]

Describe the bug

Running into strange/unexpected behavior with NavigationMenu.

Given the following:

• There are two or more <NavigationMenu.Item> / <NavigationMenu.Content> components in a <NavigationMenu>
• One or more instances have set the forceMount prop
• One or more instances set openOnHover to false

An item that has forceMount set can be "closed" by an inside click/pointer/mousedown event. This prevents interaction/event handling with any links or other child elements if managing visibility with CSS i.e. display: none.

This behavior does not seem consistent either. Included an example in the reproduction that is the same as the main example, just with a couple elements swapped, and the issue goes away.

The structure I am trying to achieve uses forceMount and openOnHover={false} on all elements but this seems to consistently fail for me. It does work if openOnHover is not set.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-xlyx311c?file=src%2Froutes%2Fforce-mount-only%2F%2Bpage.svelte

Logs

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 91.94 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /Users/acmebkmpbharvest/.volta/tools/image/node/22.14.0/bin/node
    Yarn: 3.4.1 - /Users/acmebkmpbharvest/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 11.1.0 - /Users/acmebkmpbharvest/.volta/tools/image/npm/11.1.0/bin/npm
  Browsers:
    Chrome: 147.0.7727.56
    Firefox: 147.0.3
    Safari: 26.2
  npmPackages:
    @sveltejs/kit: ^2.57.1 => 2.57.1 
    bits-ui: ^2.18.0 => 2.18.0 
    svelte: ^5.55.4 => 5.55.4

Severity

annoyance

[artur-demidov]

The issue lies in how the forceMount parameter works.

Prop forceMount = true causes the Navigation Menu to open immediately by default, even if the menu is visually hidden, which means that all the associated logic (such as focus handling or closing) begins to run.

If you set forceMount on multiple menus at once, the events will trigger on trigger on all of them but the result is only visible for the last one.

For example, on the page https://bits-ui.com/docs/components/navigation-menu, without touching anything, press Esc, and you’ll get focus immediately on the second(last) menu with forceMount, as if you had closed it with Esc.

I fixed it on my local machine like this

navigation-menu-content.svelte
pass to <NavigationMenuContentImpl> prop forceMount

navigation-menu-content-impl.svelte
<DismissibleLayer> set enabled={!forceMount}
<EscapeLayer> set enabled={!forceMount}

It works, but I think it's wrong logic, and the core contributors can fix this better.

upd. My first wrong thought was if forceMount, the developer has to manually add close handlers, check click outside and others, sorry. If menu with forceMount should work like default, I think enabled for DismissibleLayer and EscapeLayer should depend on forceMount and open state.

[heyharvest]

Because of forceMount making content "open" immediately, I was wondering if the DismissibleLayer state is not syncing up as expected. My own thought was it had to do with the onInteractOutside handlers, given that the NavigationMenu.Content state was switching to "closed" upon clicking inside the component, but I remain unsure why it only happens when openOnHover={false}

I think I'll try a previous release in case one of the changes from the last few weeks could be a factor - I could've sworn I had this setup working in an earlier version.

[artur-demidov]

I think in your repro example items with forceMount work right only with last element because only last of forceMounted item process outside click events(only it is e.target considered correct). This is my theory, not 100% sure.