diff --git a/packages/react-ui-screenshot-tests/gemini/menu.js b/packages/react-ui-screenshot-tests/gemini/menu.js index a17b7ed1fb6..a509f5bdc32 100644 --- a/packages/react-ui-screenshot-tests/gemini/menu.js +++ b/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"]')); + }); + }); }); diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/chrome.png b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/chrome.png new file mode 100644 index 00000000000..2b2b8a02fec --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/chrome.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a04e1968c6202ed11906bcf4a4eaa93ba0e676c397aed752d712f9bb45a6ce6e +size 1800 diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/firefox.png b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/firefox.png new file mode 100644 index 00000000000..b885e80518f --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/firefox.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ce49acdc5bbb428ba23d3d31b55f01fbb4e8da2b3600cee136b83f7c5886c3e4 +size 1508 diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/ie11.png b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/ie11.png new file mode 100644 index 00000000000..b2dce4af5d5 --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Menu/with disabled MenuItem/mouseenter/ie11.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8ddd5803a5980794f7e56262d2ea41bea37e7bc9169274e5a4fa497e882c421f +size 1708 diff --git a/packages/retail-ui/components/Menu/__stories__/Menu.stories.tsx b/packages/retail-ui/components/Menu/__stories__/Menu.stories.tsx index 756f4ecce45..a5a511f6a3e 100644 --- a/packages/retail-ui/components/Menu/__stories__/Menu.stories.tsx +++ b/packages/retail-ui/components/Menu/__stories__/Menu.stories.tsx @@ -84,6 +84,12 @@ storiesOf('Menu', module) MenuItem2 MenuItem3 + )) + .add('with disabled MenuItem', () => ( + + MenuItem1 + MenuItem2 + )); class MoveControls extends React.Component { diff --git a/packages/retail-ui/components/MenuItem/MenuItem.tsx b/packages/retail-ui/components/MenuItem/MenuItem.tsx index 19adab6a92a..2d0731cb776 100644 --- a/packages/retail-ui/components/MenuItem/MenuItem.tsx +++ b/packages/retail-ui/components/MenuItem/MenuItem.tsx @@ -62,6 +62,8 @@ export default class MenuItem extends React.Component { onClick: PropTypes.func, }; + private mouseEntered: boolean = false; + public render() { const { alkoLink, @@ -73,6 +75,8 @@ export default class MenuItem extends React.Component { children, _enableIconPadding, component, + onMouseEnter, + onMouseLeave, ...rest } = this.props; @@ -103,7 +107,13 @@ export default class MenuItem extends React.Component { const Component = this.getComponent(); return ( - + {iconElement} {content} {this.props.comment && ( @@ -120,6 +130,22 @@ export default class MenuItem extends React.Component { ); } + // https://github.com/facebook/react/issues/10109 + // Mouseenter event not triggered when cursor moves from disabled button + private handleMouseEnterFix = (e: React.MouseEvent) => { + if (!this.mouseEntered && this.props.onMouseEnter) { + this.mouseEntered = true; + this.props.onMouseEnter(e); + } + }; + + private handleMouseLeave = (e: React.MouseEvent) => { + this.mouseEntered = false; + if (this.props.onMouseLeave) { + this.props.onMouseLeave(e); + } + }; + private getComponent = () => { const { disabled, component, href } = this.props; diff --git a/packages/retail-ui/components/MenuItem/__tests__/MenuItem-test.tsx b/packages/retail-ui/components/MenuItem/__tests__/MenuItem-test.tsx index 229438a3f2b..72e3a263781 100644 --- a/packages/retail-ui/components/MenuItem/__tests__/MenuItem-test.tsx +++ b/packages/retail-ui/components/MenuItem/__tests__/MenuItem-test.tsx @@ -36,4 +36,35 @@ describe('MenuItem', () => { expect(wrapper.contains(http:test.href)).toEqual(true); }); + + describe('onMouseEnter', () => { + it('calls once', () => { + const onMouseEnter = jest.fn(); + const wrapper = mount( + + 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); + + wrapper + .find('button') + .simulate('mouseover') + .simulate('mouseleave') + .simulate('mouseover'); + + expect(onMouseEnter.mock.calls.length).toBe(2); + }); + }); });