From 016389df6830262675e72b51f8910e6acaa6e646 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 07:51:53 +0200
Subject: [PATCH] fix(context_menu): clicking on a submenu dismisses it

---
 .../src/stylesheets/theme-next/base.css       | 25 ++++++++++++++-----
 apps/client/src/widgets/react/FormList.tsx    | 23 +++++++++--------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index e210b8d12..60cc0230c 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -166,17 +166,30 @@ body.desktop .dropdown-submenu .dropdown-menu {
     --menu-item-end-padding: 22px;
     --menu-item-vertical-padding: 2px;
 
-    padding-top: var(--menu-item-vertical-padding) !important;
-    padding-bottom: var(--menu-item-vertical-padding) !important;
-    padding-inline-start: var(--menu-item-start-padding) !important;
-    padding-inline-end: var(--menu-item-end-padding) !important;
-
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;
 }
 
-body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item {
+.dropdown-item:not(.dropdown-submenu),
+.dropdown-item.dropdown-submenu .dropdown-toggle,
+.excalidraw .context-menu .context-menu-item {
+    padding-top: var(--menu-item-vertical-padding) !important;
+    padding-bottom: var(--menu-item-vertical-padding) !important;
+    padding-inline-start: var(--menu-item-start-padding) !important;
+    padding-inline-end: var(--menu-item-end-padding) !important;
+}
+
+.dropdown-item.dropdown-submenu {
+    padding: 0 !important;
+
+    .dropdown-toggle {
+        flex-grow: 1;
+    }
+}
+
+body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item:not(.dropdown-submenu),
+body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item.dropdown-submenu .dropdown-toggle {
     padding-inline-end: var(--menu-item-start-padding) !important;
     padding-inline-start: var(--menu-item-end-padding) !important;
 }
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index 42f43a044..f76c4f743 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -1,13 +1,15 @@
-import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
-import { ComponentChildren } from "preact";
-import Icon from "./Icon";
-import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact/compat";
 import "./FormList.css";
-import { CommandNames } from "../../components/app_context";
-import { useStaticTooltip } from "./hooks";
-import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
+
+import { Dropdown as BootstrapDropdown, Tooltip } from "bootstrap";
 import clsx from "clsx";
+import { ComponentChildren } from "preact";
+import { type CSSProperties,useEffect, useMemo, useRef, useState } from "preact/compat";
+
+import { CommandNames } from "../../components/app_context";
+import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
 import FormToggle from "./FormToggle";
+import { useStaticTooltip } from "./hooks";
+import Icon from "./Icon";
 
 interface FormListOpts {
     children: ComponentChildren;
@@ -33,7 +35,7 @@ export default function FormList({ children, onSelect, style, fullHeight, wrappe
         return () => {
             $wrapperRef.off("hide.bs.dropdown");
             dropdown.dispose();
-        }
+        };
     }, [ triggerRef, wrapperRef ]);
 
     const builtinStyles = useMemo(() => {
@@ -51,8 +53,7 @@ export default function FormList({ children, onSelect, style, fullHeight, wrappe
                 <button
                     ref={triggerRef}
                     type="button" style="display: none;"
-                    data-bs-toggle="dropdown" data-bs-display="static">
-                </button>
+                    data-bs-toggle="dropdown" data-bs-display="static" />
 
                 <div class="dropdown-menu static show" style={{
                     ...style ?? {},
@@ -199,7 +200,7 @@ export function FormListHeader({ text }: FormListHeaderOpts) {
         <li>
             <h6 className="dropdown-header">{text}</h6>
         </li>
-    )
+    );
 }
 
 export function FormDropdownDivider() {