fix(MenuItem): fix triggered MouseEnter from disabled button

packages/react-ui-screenshot-tests/gemini/menu.js

@@ -61,4 +61,13 @@ gemini.suite('Menu', wrapperSuite => {
   gemini.suite('without Shadow', suite => {
     applyTest(renderStory('Menu', 'without Shadow'), suite);
   });
+
+  gemini.suite('with disabled MenuItem', suite => {
+    suite
+      .before(renderStory('Menu', 'with disabled MenuItem'))
+      .setCaptureElements(TEST_CONTAINER)
+      .capture('mouseenter', (actions, find) => {
+        actions.click(find('[data-tid="menuitem-notdisabled"]'));
+      });
+  });
 });

packages/retail-ui/components/Menu/__stories__/Menu.stories.tsx

@@ -84,6 +84,12 @@ storiesOf('Menu', module)
       <MenuItem>MenuItem2</MenuItem>
       <MenuItem>MenuItem3</MenuItem>
     </Menu>
+  ))
+  .add('with disabled MenuItem', () => (
+    <Menu hasShadow={false}>
+      <MenuItem disabled>MenuItem1</MenuItem>
+      <MenuItem data-tid="menuitem-notdisabled">MenuItem2</MenuItem>
+    </Menu>
   ));
 
 class MoveControls extends React.Component {

packages/retail-ui/components/MenuItem/MenuItem.tsx

@@ -62,6 +62,9 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     onClick: PropTypes.func,
   };
 
+  private mouseEntered: boolean = false;
+  private component: HTMLElement | null = null;
+
   public render() {
     const {
       alkoLink,
@@ -73,6 +76,8 @@ export default class MenuItem extends React.Component<MenuItemProps> {
       children,
       _enableIconPadding,
       component,
+      onMouseEnter,
+      onMouseLeave,
       ...rest
     } = this.props;
 
@@ -103,7 +108,14 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     const Component = this.getComponent();
 
     return (
-      <Component {...rest} className={className} tabIndex={-1}>
+      <Component
+        {...rest}
+        ref={this.componentRef}
+        onMouseOver={this.handleMouseEnterFix}
+        onMouseLeave={this.handleMouseLeave}
+        className={className}
+        tabIndex={-1}
+      >
         {iconElement}
         {content}
         {this.props.comment && (
@@ -120,6 +132,26 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     );
   }
 
+  private componentRef = (el: HTMLElement | null) => {
+    this.component = el;
+  };
+
+  // https://github.com/facebook/react/issues/10109
+  // Mouseenter event not triggered when cursor moves from disabled button
+  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {
+    if (!this.mouseEntered && e.target === this.component && this.props.onMouseEnter) {
+      this.mouseEntered = true;
+      this.props.onMouseEnter(e);
+    }
+  };
+
+  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
+    if (this.props.onMouseLeave) {
+      this.mouseEntered = false;
+      this.props.onMouseLeave(e);
+    }
+  };
+
   private getComponent = () => {
     const { disabled, component, href } = this.props;