From 36f7c31a0397656b5e69ff78a44cfcbe59cc3f73 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 10 Jan 2018 12:16:28 +0100
Subject: [PATCH] Fix deselect bug of action menu in ff

---
 .../coral-admin/src/components/ActionsMenu.js | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/client/coral-admin/src/components/ActionsMenu.js b/client/coral-admin/src/components/ActionsMenu.js
index ef4e46573..5ad8ddda9 100644
--- a/client/coral-admin/src/components/ActionsMenu.js
+++ b/client/coral-admin/src/components/ActionsMenu.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Button, Icon} from 'coral-ui';
+import ClickOutside from 'coral-framework/components/ClickOutside';
 import {Menu} from 'react-mdl';
 import cn from 'classnames';
 import {findDOMNode} from 'react-dom';
@@ -34,25 +35,27 @@ class ActionsMenu extends React.Component {
   render() {
     const {className = '', buttonClassNames = '', label = ''} = this.props;
     return (
-      <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
-        <Button
-          cStyle='actions'
-          className={cn(styles.button, {[styles.buttonOpen]: this.state.open}, buttonClassNames)}
-          disabled={false}
-          id={this.id}
-          onClick={this.syncOpenState}
-          icon={this.props.icon}
-          raised>
-          {label ? label : t('modqueue.actions')}
-          <Icon
-            name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
-            className={styles.arrowIcon}
-          />
-        </Button>
-        <Menu target={this.id} className={styles.menu} ref={this.handleRef}>
-          {this.props.children}
-        </Menu>
-      </div>
+      <ClickOutside onClickOutside={this.syncOpenState}>
+        <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
+          <Button
+            cStyle='actions'
+            className={cn(styles.button, {[styles.buttonOpen]: this.state.open}, buttonClassNames)}
+            disabled={false}
+            id={this.id}
+            onClick={this.syncOpenState}
+            icon={this.props.icon}
+            raised>
+            {label ? label : t('modqueue.actions')}
+            <Icon
+              name={this.state.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
+              className={styles.arrowIcon}
+            />
+          </Button>
+          <Menu target={this.id} className={styles.menu} ref={this.handleRef}>
+            {this.props.children}
+          </Menu>
+        </div>
+      </ClickOutside>
     );
   }
 }