navigation-menu disableOutsidePointerEvents does not work

[kuus]

Bug report

Current Behavior

Adding disableOutsidePointerEvents cause open/close flickering

Expected behavior

As according to the docs:

When true, hover/focus/click interactions will be disabled on elements outside the bounds of the component. Users will need to click twice on outside elements to interact with them: Once to close the navigation menu, and again to activate the element.

The Content should stay open when the mouse pointer leaves the Content area

Reproducible example

Open the CodeSandbox linked from the docs and add the disableOutsidePointerEvents prop on the <NavigationMenu.Content> components

Additional context

Maybe I misinterpreted the prop? Or should it be used in tandem with other props?

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-navigation-menu	1.1.3
React	n/a	18.2.0
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[benoitgrelard]

@andy-hook this seems strange to me, the docs do show the DismissableLayer props are here on content, but I wonder if it's a mistake. Usually we hide a combination of those behind modality and don't allow direct access to those props. It seems like potentially this wasn't considered here and we just ended up documenting things as they are?

[andy-hook]

I don't think we've implemented the modality pattern for this component yet.

The Content should stay open when the mouse pointer leaves the Content area

Perhaps unintuitive given the current documentation but this can be achieved by preventing default inside onPointerEnter onPointerLeave:
https://codesandbox.io/p/sandbox/navigation-menu-on-click-duwvgn?file=%2FApp.js%3A358%2C1-360%2C1

@kuus is that the interaction you are trying to achieve?

[benoitgrelard]

I mean I'm not sure modality even makes sense for a component like this, because if the content was modal, you wouldn't be able to interact with the other items in the top-level.

So I'm inclined to say that the solution here is to hardcode those props to formalize the non-modal nature of it and thus remove those props from the docs.

[andy-hook]

So I'm inclined to say that the solution here is to hardcode those props to formalize the non-modal nature of it and thus remove those props from the docs.

I agree with this.

The Content should stay open when the mouse pointer leaves the Content area

Hopefully the suggested solution in my comment is still helpful for this specific need however.

[kuus]

@andy-hook yes for my desired behaviour it was enough to do onPointerLeave={e => e.preventDefault()}, I found it out by trial and error after having already opened this issue, thanks for your help.
Maybe the docs could add that behaviour or maybe it's just an edge case need not to be documented, don't know :).
thanks for the quick feedback @benoitgrelard