[NavigationMenu] Menu closes when mouseenter + instantaneous click

[thgh]

Bug report

Current Behavior

1. Click Learn
2. Learn menu opens
3. Click Overview
4. Overview menu is shortly visible and then closes

Expected behavior

1. Click Learn
2. Learn menu opens
3. Click Overview
4. Overview menu opens

Reproducible example

https://www.radix-ui.com/docs/primitives/components/navigation-menu

Suggested solution

The initial delay that "ignores" the first toggle, should be re-applied when a new menu item is opened.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser	Chrome
Assistive tech
Node	n/a
npm/yarn
Operating System

[josephkruse]

Duplicate of this issue:
#1630

There's a hacky fix in that thread.

[thgh]

Oh thanks for the context, it's the same underlying issue indeed. I don't want to disable hover, both should trigger the menu.

[josephkruse]

It doesn't disable hover just disables clicks for 1 seconds after hover.

https://codesandbox.io/p/sandbox/peaceful-nobel-gmlbyy?file=%2FApp.tsx

[thgh]

Thanks, I refactored it to this workaround for now:

function Item () {
  const fix = useTriggerFix()
  
  ...
        <NavigationMenu.Trigger {...fix}>
  ...
}

function useTriggerFix() {
  return useMemo(() => {
    let disable
    return {
      onClick: (e) => disable && e.preventDefault(),
      onPointerEnter: () => {
        clearTimeout(disable)
        disable = setTimeout(() => (disable = false), 1000)
      },
    }
  }, [])
}

[kachkaev]

Yeah seems like it’s a duplicate of #1630. A workaround can be found here: #1630 (comment).

[benoitgrelard]

Duplicate of #1630