From 98e44188867ef3d2c328303827e24241277a98c7 Mon Sep 17 00:00:00 2001 From: Chris Dhanaraj Date: Wed, 12 Jul 2017 13:15:22 -0500 Subject: [PATCH] fix(overflowmenu): bring over the rest of the IE11 fix (#63) * fix(overflowmenu): remove handleBlur for now * fix(ie11): temporary remove test * fix(ie11): port over full ie11 fix for overflowmenu * fix(tests): update tests to reflect that icon is the new click target --- components/OverflowMenu.js | 17 ++++++++++++++--- components/OverflowMenuItem.js | 16 +++++++++++++++- components/__tests__/OverflowMenu-test.js | 5 +++-- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/components/OverflowMenu.js b/components/OverflowMenu.js index 88215968fa..df61fb7efb 100644 --- a/components/OverflowMenu.js +++ b/components/OverflowMenu.js @@ -82,6 +82,10 @@ class OverflowMenu extends Component { }; handleClickOutside = () => { + this.closeMenu(); + }; + + closeMenu = () => { this.setState({ open: false }); }; @@ -98,6 +102,7 @@ class OverflowMenu extends Component { menuOffset, menuOffsetFlip, iconClass, + onClick, // eslint-disable-line ...other } = this.props; @@ -119,12 +124,17 @@ class OverflowMenu extends Component { iconClass ); + const childrenWithProps = React.Children.map(children, child => + React.cloneElement(child, { + closeMenu: this.closeMenu, + }) + ); + return (
    - {children} + {childrenWithProps}
:
    - {children} + {childrenWithProps}
}
diff --git a/components/OverflowMenuItem.js b/components/OverflowMenuItem.js index 52dbc66097..da70c4e7e0 100644 --- a/components/OverflowMenuItem.js +++ b/components/OverflowMenuItem.js @@ -16,11 +16,13 @@ const propTypes = { onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, onMouseUp: PropTypes.func, + closeMenu: React.PropTypes.func, }; const defaultProps = { hasDivider: false, isDelete: false, + onClick: () => {}, }; const OverflowMenuItem = ({ @@ -28,6 +30,8 @@ const OverflowMenuItem = ({ itemText, hasDivider, isDelete, + closeMenu, + onClick, ...other }) => { const overflowMenuBtnClasses = classNames( @@ -43,9 +47,19 @@ const OverflowMenuItem = ({ } ); + const handleClick = evt => { + onClick(evt); + closeMenu(); + }; + const item = (
  • -
  • diff --git a/components/__tests__/OverflowMenu-test.js b/components/__tests__/OverflowMenu-test.js index 563732f527..823cf8cf82 100644 --- a/components/__tests__/OverflowMenu-test.js +++ b/components/__tests__/OverflowMenu-test.js @@ -86,11 +86,12 @@ describe('OverflowMenu', () => { expect(menuOptions.hasClass(openClass)).not.toEqual(false); }); - it('should be in an open state after menu is clicked', () => { + it('should be in an open state after icon is clicked', () => { const rootWrapper = mount(); const menu = rootWrapper.childAt(0); + const icon = menu.find(Icon); - menu.simulate('click'); + icon.simulate('click'); expect(rootWrapper.state().open).toEqual(true); });