From 3487eb78575edba72a836ea3a725c2d3fc3b88e0 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 20 May 2020 23:40:54 -0700
Subject: [PATCH] fix: Submenu auto close

---
 app/components/DropdownMenu/DropdownMenu.js | 24 ++++++++++++++++++++-
 app/menus/AccountMenu.js                    |  2 +-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index e67f5aa8..abf02a3c 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -31,6 +31,7 @@ type Props = {
 @observer
 class DropdownMenu extends React.Component<Props> {
   id: string = `menu${counter++}`;
+  closeTimeout: TimeoutID;
 
   @observable top: ?number;
   @observable bottom: ?number;
@@ -134,6 +135,19 @@ class DropdownMenu extends React.Component<Props> {
     this.forceUpdate();
   }
 
+  closeAfterTimeout = (closePortal: () => void) => () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+    this.closeTimeout = setTimeout(closePortal, 500);
+  };
+
+  clearCloseTimeout = () => {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout);
+    }
+  };
+
   render() {
     const { className, hover, label, children } = this.props;
 
@@ -148,7 +162,11 @@ class DropdownMenu extends React.Component<Props> {
           {({ closePortal, openPortal, isOpen, portal }) => (
             <React.Fragment>
               <Label
-                onMouseOver={
+                onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                onMouseOut={
+                  hover ? this.closeAfterTimeout(closePortal) : undefined
+                }
+                onMouseEnter={
                   hover ? this.handleOpen(openPortal, closePortal) : undefined
                 }
                 onClick={
@@ -178,6 +196,10 @@ class DropdownMenu extends React.Component<Props> {
                 >
                   <Menu
                     ref={this.menuRef}
+                    onMouseMove={hover ? this.clearCloseTimeout : undefined}
+                    onMouseOut={
+                      hover ? this.closeAfterTimeout(closePortal) : undefined
+                    }
                     onClick={
                       typeof children === 'function'
                         ? undefined
diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js
index 1de0b76d..2490100d 100644
--- a/app/menus/AccountMenu.js
+++ b/app/menus/AccountMenu.js
@@ -82,7 +82,6 @@ class AccountMenu extends React.Component<Props> {
           </DropdownMenuItem>
           <hr />
           <DropdownMenu
-            hover
             position="right"
             style={{
               left: 170,
@@ -97,6 +96,7 @@ class AccountMenu extends React.Component<Props> {
                 </ChangeTheme>
               </DropdownMenuItem>
             }
+            hover
           >
             <DropdownMenuItem
               onClick={() => ui.setTheme('system')}