From 8a4e471a22f9376b32ef79d158d51a53408aeabb Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sat, 18 Nov 2017 16:41:53 -0800
Subject: [PATCH] Fix issue with context menus inside playlist menus

---
 js/components/PlaylistWindow/PlaylistMenu.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/components/PlaylistWindow/PlaylistMenu.js b/js/components/PlaylistWindow/PlaylistMenu.js
index f4f1ebc7..d7da8823 100644
--- a/js/components/PlaylistWindow/PlaylistMenu.js
+++ b/js/components/PlaylistWindow/PlaylistMenu.js
@@ -54,20 +54,28 @@ export default class PlaylistMenu extends React.Component {
       this.setState({ selected: false });
       return;
     }
-    this.setState({ selected: true });
 
     const handleClickOut = ee => {
+      // If the click is _not_ inside the menu.
       if (!target.contains(ee.target)) {
-        this.setState({ selected: false });
-        ee.stopPropagation();
+        // If we've clicked on a Context Menu spawed inside this menu, it will
+        // register as an external click. However, hiding the menu will remove
+        // the Context Menu from the DOM. Therefore, we wait until the next
+        // event loop to actually hide ourselves.
+        setTimeout(() => {
+          // Close the menu
+          this.setState({ selected: false });
+        }, 0);
+        window.document.removeEventListener("click", handleClickOut, {
+          capture: true
+        });
       }
-      window.document.removeEventListener("click", handleClickOut, {
-        capture: true
-      });
     };
     window.document.addEventListener("click", handleClickOut, {
       capture: true
     });
+
+    this.setState({ selected: true });
   }
 
   render() {