[Bug]: navigation popoever doesn't follow hovered item

[ZTL-UwU]

Reproduction

https://stackblitz.com/edit/oaoibr?file=src%2FApp.vue

Describe the bug

The popoever always stays at the front even though the hovered item is at the back.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    radix-vue: latest => 1.9.3 
    shadcn-vue: latest => 0.10.5 
    vue: latest => 3.4.36

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[kikky7]

I also want to add that when using indicator <NavigationMenuIndicator /> (before NavigationMenuList closing tag), it translates back to the first link when closing the popover of other menu items, which looks very weird and buggy.

And when using :disable-hover-trigger="true" it sometimes closes on mouseout and sometimes it stays open. Why this prop is not disabling trigger hover events all together instead of some unexpected mixed behaviour?

[kikky7]

@ZTL-UwU My menu has some custom tweaks, so I am not sure this will work if you use example from the docs.

Try this:
Go to NavigationMenu.vue component and instead of max-w-max put w-full on NavigationMenuRoot class

Then it should auto-position the dropdown, only drawback is that dropdown can't have bigger width than the NavigationMenuRoot div.

Edit: this is my class for the root: relative z-10 flex w-full items-center justify-center with this class list the dropdown will be centered inside this container and not at the start.

[kikky7]

I also want to add that when using indicator <NavigationMenuIndicator /> (before NavigationMenuList closing tag), it translates back to the first link when closing the popover of other menu items, which looks very weird and buggy.

And when using :disable-hover-trigger="true" it sometimes closes on mouseout and sometimes it stays open. Why this prop is not disabling trigger hover events all together instead of some unexpected mixed behaviour?

So, this indicator translate happens because of how tailwind-animate classes animate-in and animate-out work; they add animations for several properties, including transform/translate.

So if someone is using indicator:

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink>...</NavigationMenuLink>
    </NavigationMenuItem>
  <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>

If you just want to fade the indicator (without translating it to the initial state), replace all [state-hidden] and [state-visible] classes with this: data-[state=hidden]:animate-fade-out data-[state=visible]:animate-fade-in

And fade-in and fade-out is already defined in tailwind.config.js as part of shadcn. I just like to adjust it to my custom settings:

animation: ({ theme }) => ({
  // Other animations...
  "fade-in": `fade-in ${theme("transitionDuration.DEFAULT")} ${theme("transitionTimingFunction.DEFAULT")}`,
  "fade-out": `fade-out ${theme("transitionDuration.DEFAULT")} ${theme("transitionTimingFunction.DEFAULT")}`,
}),

[sadeghbarati]

@ZTL-UwU This is long standing issue in radix-ui and radix-vue

This should be fixed in radix-vue v2

radix-vue/radix-vue#589