[604] Use the ClickAwayListener to close the ContextMenu

Bug: #604
Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>

frontend/src/core/contextmenu/ContextMenu.tsx

@@ -10,6 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import { Text } from 'core/text/Text';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef } from 'react';
@@ -62,21 +63,7 @@ const contextMenuPropTypes = {
 export const ContextMenu = ({ x, y, caretPosition, children, onClose, 'data-testid': dataTestId }) => {
   const domNode = useRef(null);
 
-  const onClickOutsideElement = useCallback(
-    (event) => {
-      if (domNode.current && !domNode.current.contains(event.target)) {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-
-  useEffect(() => {
-    document.addEventListener('click', onClickOutsideElement, false);
-    return () => {
-      document.removeEventListener('click', onClickOutsideElement, false);
-    };
-  }, [onClickOutsideElement]);
+  const handleClickAway = () => onClose();
 
   const onKeyDown = useCallback(
     (event) => {
@@ -119,13 +106,15 @@ export const ContextMenu = ({ x, y, caretPosition, children, onClose, 'data-test
     );
   }
   return (
-    <div className={styles.contextmenu} style={style}>
-      {caret}
-      <ul className={styles.menucontents} ref={domNode} data-testid={dataTestId}>
-        {children}
-      </ul>
-      <div />
-    </div>
+    <ClickAwayListener onClickAway={handleClickAway}>
+      <div className={styles.contextmenu} style={style}>
+        {caret}
+        <ul className={styles.menucontents} ref={domNode} data-testid={dataTestId}>
+          {children}
+        </ul>
+        <div />
+      </div>
+    </ClickAwayListener>
   );
 };
 ContextMenu.propTypes = contextMenuPropTypes;