KendoReact Menu - Close on MenuItem Click & Portal Rendering

[Sanja Tolo]

Hi everyone,

 

I’m using the KendoReact Menu component, which opens on hover. However, I’ve noticed that when clicking on a MenuItem (in our case, we’re opening a side panel from a grid item), the menu does not automatically close. I couldn’t find any prop in the documentation that controls this behavior.

 

Additionally, I’m curious about the decision to stop rendering the menu inside a portal in versions 9+. This change impacts how the menu behaves in certain layouts.

• Is there a built-in way to make the menu close when a MenuItem is clicked?

• If not, what would be the best way to achieve this?

 

Any guidance or workarounds would be greatly appreciated!

[Yanko]

Hello, Sanja Tolo,

Yes, you can achieve the desired result utilizing the "ref" of the Menu and call its "onItemMouseLeave", which will close the menu within the onSelect event. Following is an example demonstrating this approach:

• https://stackblitz.com/edit/react-bdps7ebz?file=app%2Fapp.tsx 

Please review the above approach and let me know if additional inquiries arise.

Regards,
Yanko
Progress Telerik