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,8 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     onClick: PropTypes.func,
   };
 
+  private mouseEntered: boolean = false;
+
   public render() {
     const {
       alkoLink,
@@ -73,6 +75,8 @@ export default class MenuItem extends React.Component<MenuItemProps> {
       children,
       _enableIconPadding,
       component,
+      onMouseEnter,
+      onMouseLeave,
       ...rest
     } = this.props;
 
@@ -103,7 +107,13 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     const Component = this.getComponent();
 
     return (
-      <Component {...rest} className={className} tabIndex={-1}>
+      <Component
+        {...rest}
+        onMouseOver={this.handleMouseEnterFix}
+        onMouseLeave={this.handleMouseLeave}
+        className={className}
+        tabIndex={-1}
+      >
         {iconElement}
         {content}
         {this.props.comment && (
@@ -120,6 +130,22 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     );
   }
 
+  // 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 && this.props.onMouseEnter) {
+      this.mouseEntered = true;
+      this.props.onMouseEnter(e);
+    }
+  };
+
+  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
+    this.mouseEntered = false;
+    if (this.props.onMouseLeave) {
+      this.props.onMouseLeave(e);
+    }
+  };
+
   private getComponent = () => {
     const { disabled, component, href } = this.props;
 

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

@@ -36,4 +36,35 @@ describe('MenuItem', () => {
 
     expect(wrapper.contains(<span>http:test.href</span>)).toEqual(true);
   });
+
+  describe('onMouseEnter', () => {
+    it('calls once', () => {
+      const onMouseEnter = jest.fn();
+      const wrapper = mount(
+        <MenuItem onMouseEnter={onMouseEnter}>
+          <span>MenuItem</span>
+        </MenuItem>,
+      );
+      const button = wrapper.find('button');
+
+      button.simulate('mouseover');
+      wrapper.find('span').simulate('mouseover');
+      button.simulate('mouseover');
+
+      expect(onMouseEnter.mock.calls.length).toBe(1);
+    });
+
+    it('calls again after onMouseLeave', () => {
+      const onMouseEnter = jest.fn();
+      const wrapper = mount(<MenuItem onMouseEnter={onMouseEnter}>MenuItem</MenuItem>);
+
+      wrapper
+        .find('button')
+        .simulate('mouseover')
+        .simulate('mouseleave')
+        .simulate('mouseover');
+
+      expect(onMouseEnter.mock.calls.length).toBe(2);
+    });
+  });
 });