Disable click on Navigation Menu Trigger

[ayaniv]

The Radix Navigation Menu is excellent, and I particularly appreciate its accessibility features. However, there is a potential issue that may arise due to its dual functionality of responding to both hover and click actions on the NavigationMenuTrigger. This could lead to a confusing bug where clicking on the trigger inadvertently closes the menu instead of displaying its content.

For instance, you can observe this behavior by attempting to open the dropdown by clicking on the trigger in the original example from the documentation:

Original Example Link

To address this issue, I'd like to propose the following modifications, which prevent mouse clicks on the trigger while still allowing keyboard actions to function. You can review the code changes in the following link:

Modified Code Link

In these changes, I've introduced a new component named StyledTriggerDisableClick, as outlined in lines 98-131. Then, I've substituted this component for StyledTrigger within StyledTriggerWithCaret, as seen in lines 135 and 138. The core concept behind this adjustment is to set a flag to true when hovering over the trigger element and to check this flag when clicking the trigger to prevent mouse clicks from closing the menu inadvertently.

I'm sharing this workaround for the benefit of future users who may want to block mouse click events on the Radix Navigation Menu Trigger. Additionally, I'm submitting this as a feature request for the next version, in hopes of enabling developers to achieve this behavior with a simple prop on the trigger.

Your feedback and comments on these suggestions are highly appreciated.

[ayaniv]

The suggested solution above is not so good as it blocks touch devices from working properly.