[dashboard] Ensure that context menus collapse even in Modals by not calling e.stopPropagation() on click events

Author: jankeromnes

components/dashboard/src/components/ContextMenu.tsx

@@ -35,7 +35,7 @@ function ContextMenu(props: ContextMenuProps) {
         setExpanded(!expanded);
     };
 
-    const handler = (evt: KeyboardEvent) => {
+    const keydownHandler = (evt: KeyboardEvent) => {
         if (evt.key === "Escape") {
             setExpanded(false);
         }
@@ -55,11 +55,11 @@ function ContextMenu(props: ContextMenuProps) {
     };
 
     useEffect(() => {
-        window.addEventListener("keydown", handler);
+        window.addEventListener("keydown", keydownHandler);
         window.addEventListener("click", clickHandler);
         // Remove event listeners on cleanup
         return () => {
-            window.removeEventListener("keydown", handler);
+            window.removeEventListener("keydown", keydownHandler);
             window.removeEventListener("click", clickHandler);
         };
     }, []); // Empty array ensures that effect is only run on mount and unmount

components/dashboard/src/components/Modal.tsx

@@ -79,7 +79,6 @@ export default function Modal(props: {
                         "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left " +
                         (props.className || "")
                     }
-                    onClick={(e) => e.stopPropagation()}
                 >
                     {props.closeable !== false && (
                         <div