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) {
{ toggleExpanded(); - e.stopPropagation(); + // Don't use `e.stopPropagation();` because that prevents that clicks on other context menus closes this one. + setSkipClickHandler(true); }}> {children}