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

Author: chrisdhanaraj

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 (
       <ClickListener onClickOutside={this.handleClickOutside}>
         <div
           {...other}
           className={overflowMenuClasses}
-          onClick={this.handleClick}
           onKeyDown={this.handleKeyPress}
           aria-label={ariaLabel}
           id={id}
@@ -134,6 +144,7 @@ class OverflowMenu extends Component {
           }}
         >
           <Icon
+            onClick={this.handleClick}
             className={overflowMenuIconClasses}
             name={iconName}
             description={iconDescription}
@@ -146,11 +157,11 @@ class OverflowMenu extends Component {
                 menuOffset={flipped ? menuOffsetFlip : menuOffset}
               >
                 <ul className={overflowMenuOptionsClasses}>
-                  {children}
+                  {childrenWithProps}
                 </ul>
               </FloatingMenu>
             : <ul className={overflowMenuOptionsClasses}>
-                {children}
+                {childrenWithProps}
               </ul>}
         </div>
       </ClickListener>

components/OverflowMenuItem.js

@@ -16,18 +16,22 @@ const propTypes = {
   onMouseEnter: PropTypes.func,
   onMouseLeave: PropTypes.func,
   onMouseUp: PropTypes.func,
+  closeMenu: React.PropTypes.func,
 };
 
 const defaultProps = {
   hasDivider: false,
   isDelete: false,
+  onClick: () => {},
 };
 
 const OverflowMenuItem = ({
   className,
   itemText,
   hasDivider,
   isDelete,
+  closeMenu,
+  onClick,
   ...other
 }) => {
   const overflowMenuBtnClasses = classNames(
@@ -43,9 +47,19 @@ const OverflowMenuItem = ({
     }
   );
 
+  const handleClick = evt => {
+    onClick(evt);
+    closeMenu();
+  };
+
   const item = (
     <li className={overflowMenuItemClasses}>
-      <button {...other} type="button" className={overflowMenuBtnClasses}>
+      <button
+        {...other}
+        type="button"
+        className={overflowMenuBtnClasses}
+        onClick={handleClick}
+      >
         {itemText}
       </button>
     </li>

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(<OverflowMenu />);
       const menu = rootWrapper.childAt(0);
+      const icon = menu.find(Icon);
 
-      menu.simulate('click');
+      icon.simulate('click');
       expect(rootWrapper.state().open).toEqual(true);
     });