From 4a2a582f1ebec67547b046deca57ac2815537412 Mon Sep 17 00:00:00 2001
From: "Cornelius A. Ludmann" <cornelius@gitpod.io>
Date: Mon, 14 Jun 2021 14:24:38 +0000
Subject: [PATCH] [dashboard] Close context menu when another one will be
 opened

Fixes #3823
---
 .../dashboard/src/components/ContextMenu.tsx      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index 3977f6e348d281..36c530e9681477 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -4,6 +4,7 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+import React from 'react';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -39,8 +40,17 @@ function ContextMenu(props: ContextMenuProps) {
         }
     }
 
+    const skipClickHandlerRef = React.useRef(false);
+    const setSkipClickHandler = (data: boolean) => {
+        skipClickHandlerRef.current = data;
+    }
     const clickHandler = (evt: MouseEvent) => {
-        setExpanded(false);
+        if (skipClickHandlerRef.current) {
+            // skip only once
+            setSkipClickHandler(false);
+        } else {
+            setExpanded(false);
+        }
     }
 
     useEffect(() => {
@@ -65,7 +75,8 @@ function ContextMenu(props: ContextMenuProps) {
         <div className="relative cursor-pointer">
             <div onClick={(e) => {
                 toggleExpanded();
-                e.stopPropagation();
+                // Don't use `e.stopPropagation();` because that prevents that clicks on other context menus closes this one.
+                setSkipClickHandler(true);
             }}>
                 {children}
             </div>