preact
preact copied to clipboard
preactjs
Difference Between Preact & React with Material-UI Menu
I am working on a navigation menu for work and am noticing an inconsistency in the way Preact and React handle the onMouseLeave event for a div that contains a Material-UI Menu component. I have a div that contains a menu item that, on a mouse enter event, should open another menu to allow for more options to be displayed. I used this React-based repo as a starting point and got all of the functionality I need working in React, but moving the code over to Preact introduces a problem. The sub-menu is not able to be held open when the mouse moves to it; the sub-menu will close automatically. I believe that the issue lies in the onMouseLeave event on the div surrounding the MenuItem and Menu within the SubMenu component. The log statement in that method will appear when moving from the parent menu to the sub-menu in the Preact example, but not in the React example. My guess is that the wrapping div properly contains the Menu item in React, but not in Preact.
Reproduction
Steps to reproduce
Click the button to open the menu, hover over one of the Inner Menu options. Move the mouse inside of the new menu that appears. In the Preact example, the sub-menu will close and a console log will appear that says the onMouseLeave method has been called. In the React example, this behavior will not occur. You are able to move around the sub-menu and select an option easily.
Expected Behavior
The Preact example should handle the menus the same way as the React example. The sub-menu should not be hidden when moving from the parent menu to the sub-menu.
Actual Behavior
The Preact example is hiding the sub-menu when the mouse is moved off of the menu item in the parent menu list.
Any help or suggestions would be greatly appreciated. Thank you!
This issue still persists, and actually affects various components for example the Select Component.
For Example.
React. https://codesandbox.io/s/react-on-mouse-leave-forked-dtshr?file=/src/App.js Preact. https://codesandbox.io/s/preact-on-mouse-leave-forked-56e01?file=/src/index.js
I've just hit the same thing. Is there any hierarchical menu that works with preact?
