fix: first click in a dialog opened from a menu does nothing (#31496)

The chat header menu, the folder menu, the note menu, the knowledge Add Content and folder row menus and the Actions menus in Models, Archived Chats and Personalization stayed open behind the dialog they opened, so the first click inside that dialog only closed the menu. These menus now close when an item is picked, like the sidebar chat menu. The note menu's Formatting switch, the chat tags and submenus such as Download still keep the menu open.

Fixes #31493

src/lib/components/admin/Settings/Models.svelte

@@ -824,7 +824,7 @@
 							{/if}
 						</div>
 
-						<Dropdown align="end">
+						<Dropdown closeOnSelect align="end">
 							<Tooltip content={$i18n.t('Actions')}>
 								<button
 									class="flex h-8 items-center gap-1.5 rounded-xl bg-transparent px-1.5 text-[0.8125rem] font-normal text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"

src/lib/components/chat/Settings/ArchivedChats.svelte

@@ -221,7 +221,7 @@
 			{/if}
 		</div>
 
-		<Dropdown align="end">
+		<Dropdown closeOnSelect align="end">
 			<Tooltip content={$i18n.t('Actions')}>
 				<button
 					class="flex h-7 items-center gap-1.5 rounded-lg bg-transparent px-1.5 text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"

src/lib/components/chat/Settings/Personalization.svelte

@@ -185,7 +185,7 @@
 								<div class="min-w-0 flex-1"></div>
 							{/if}
 
-							<Dropdown align="end">
+							<Dropdown closeOnSelect align="end">
 								<Tooltip content={$i18n.t('Actions')}>
 									<button
 										class="flex h-7 items-center gap-1.5 rounded-lg bg-transparent px-1.5 text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white"

src/lib/components/layout/Navbar/Menu.svelte

@@ -278,6 +278,7 @@
 {/if}
 
 <Dropdown
+	closeOnSelect
 	onOpenChange={(state) => {
 		if (state === false) {
 			onClose();
@@ -501,7 +502,8 @@
 
 				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
 
-				<div class="flex max-h-28 overflow-y-auto px-2 py-1">
+				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+				<div class="flex max-h-28 overflow-y-auto px-2 py-1" on:click={(e) => e.preventDefault()}>
 					<Tags chatId={chat.id} />
 				</div>
 			{/if}

src/lib/components/layout/Sidebar/Folders/FolderMenu.svelte

@@ -26,6 +26,7 @@
 </script>
 
 <Dropdown
+	closeOnSelect
 	bind:show
 	{align}
 	onOpenChange={(state) => {
@@ -62,7 +63,6 @@
 			<button
 				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] select-none cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900"
 				on:click={() => {
-					show = false;
 					onMarkAllRead();
 				}}
 			>

src/lib/components/notes/Notes/NoteMenu.svelte

@@ -36,6 +36,7 @@
 </script>
 
 <Dropdown
+	closeOnSelect
 	bind:show
 	align="end"
 	sideOffset={6}
@@ -54,8 +55,10 @@
 						'Format Markdown as you type and paste. Turn off to keep Markdown characters and paste plain text. Existing formatting is preserved.'
 					)}
 				>
+					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 					<div
 						class="select-none flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
+						on:click={(e) => e.preventDefault()}
 					>
 						<Bold className="size-3.5 shrink-0" strokeWidth="2" />
 						<span class="flex-1">{$i18n.t('Formatting')}</span>
@@ -106,7 +109,6 @@
 					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
 					on:click={() => {
 						onUploadFiles();
-						show = false;
 					}}
 				>
 					<CloudArrowUp className="size-3.5" strokeWidth="2" />
@@ -155,7 +157,6 @@
 					class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
 					on:click={() => {
 						onPin();
-						show = false;
 					}}
 				>
 					{#if isPinned}

src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte

@@ -26,6 +26,7 @@
 </script>
 
 <Dropdown
+	closeOnSelect
 	bind:show
 	onOpenChange={(state) => {
 		if (state === false) {
@@ -62,7 +63,6 @@
 				class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100"
 				on:click={() => {
 					onUpload({ type: 'new_directory' });
-					show = false;
 				}}
 			>
 				<NewFolderAlt />
@@ -134,7 +134,6 @@
 				class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs hover:text-gray-900 dark:hover:text-gray-100"
 				on:click={() => {
 					onReset();
-					show = false;
 				}}
 			>
 				<ArrowUturnLeft strokeWidth="2" />

src/lib/components/workspace/Knowledge/KnowledgeBase/DirectoryRow.svelte

@@ -34,12 +34,10 @@
 	let editName = '';
 	let editInput: HTMLInputElement;
 	let dragOver = false;
-	let showDropdown = false;
 
 	const startRename = () => {
 		editName = directory.name;
 		editing = true;
-		showDropdown = false;
 		setTimeout(() => editInput?.select(), 0);
 	};
 
@@ -163,7 +161,7 @@
 
 	{#if writeAccess}
 		<div class="flex items-center">
-			<Dropdown bind:show={showDropdown} align="end" sideOffset={4}>
+			<Dropdown closeOnSelect align="end" sideOffset={4}>
 				<button
 					class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
 					type="button"