From b3d92f932f7c39e4fad0caca80ecc0dce86b57ec Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 24 Dec 2025 12:19:00 +0200
Subject: [PATCH] fix(breadcrumbs): menu dismisses on click

---
 apps/client/src/widgets/layout/Breadcrumb.css |  4 +-
 apps/client/src/widgets/layout/Breadcrumb.tsx | 37 +++++++++----------
 apps/client/src/widgets/react/FormList.tsx    |  5 ++-
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 572392757..8edebbe68 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -57,7 +57,7 @@
 
         .bxs-chevron-right {
             transform: translateY(8%);
-            
+
             &::before {
                 opacity: .75;
             }
@@ -87,7 +87,7 @@
         color: var(--custom-color, inherit) !important;
     }
 
-    .dropdown .breadcrumb-child-list {
+    .dropdown.breadcrumb-child-list {
         /* Icon */
         li > span:first-child {
             opacity: .75;
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 24ad806ae..08ded7c6b 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -193,7 +193,7 @@ function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
             noSelectButtonStyle
             buttonClassName="icon-action"
             hideToggleArrow
-            dropdownContainerClassName="tn-dropdown-menu-scrollable"
+            dropdownContainerClassName="tn-dropdown-menu-scrollable breadcrumb-child-list"
             dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}
         >
             <BreadcrumbSeparatorDropdownContent {...props} />
@@ -207,7 +207,7 @@ function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNoteP
     const childNotes = useChildNotes(parentNoteId);
 
     return (
-        <ul className="breadcrumb-child-list">
+        <>
             {childNotes.map((note) => {
                 if (note.noteId === "_hidden") return;
                 if (hideArchivedNotes && note.isArchived) return null;
@@ -231,7 +231,7 @@ function BreadcrumbSeparatorDropdownContent({ notePath, noteContext, activeNoteP
                 icon="bx bx-plus"
                 onClick={() => note_create.createNote(notePath, { activate: true })}
             >{t("breadcrumb.create_new_note")}</FormListItem>
-        </ul>
+        </>
     );
 }
 
@@ -244,26 +244,25 @@ function BreadcrumbCollapsed({ items, noteContext }: {
             text={<Icon icon="bx bx-dots-horizontal-rounded" />}
             noSelectButtonStyle
             buttonClassName="icon-action"
+            dropdownContainerClassName="breadcrumb-child-list"
             hideToggleArrow
             dropdownOptions={{ popperConfig: { strategy: "fixed" } }}
         >
-            <ul className="breadcrumb-child-list">
-                {items.map((notePath) => {
-                    const notePathComponents = notePath.split("/");
-                    const noteId = notePathComponents[notePathComponents.length - 1];
-                    const note = froca.getNoteFromCache(noteId);
-                    if (!note) return null;
+            {items.map((notePath) => {
+                const notePathComponents = notePath.split("/");
+                const noteId = notePathComponents[notePathComponents.length - 1];
+                const note = froca.getNoteFromCache(noteId);
+                if (!note) return null;
 
-                    return <li key={note.noteId}>
-                        <FormListItem
-                            icon={note.getIcon()}
-                            onClick={() => noteContext?.setNote(notePath)}
-                        >
-                            <span>{note.title}</span>
-                        </FormListItem>
-                    </li>;
-                })}
-            </ul>
+                return <li key={note.noteId}>
+                    <FormListItem
+                        icon={note.getIcon()}
+                        onClick={() => noteContext?.setNote(notePath)}
+                    >
+                        <span>{note.title}</span>
+                    </FormListItem>
+                </li>;
+            })}
         </Dropdown>
     );
 }
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index 84cc4d8c6..9c32e8878 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -205,7 +205,10 @@ export function FormListHeader({ text }: FormListHeaderOpts) {
 }
 
 export function FormDropdownDivider() {
-    return <div className="dropdown-divider" />;
+    return <div
+        className="dropdown-divider"
+        onClick={e => e.stopPropagation()}
+    />;
 }
 
 export function FormDropdownSubmenu({ icon, title, children, dropStart, onDropdownToggleClicked }: {