Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: explicitly disable dragging and text selection inside dropdown menus (#21713)

Browse Source 
* fix(ui): remove select-none from move and pdf menu items to allow highlighting

* fix(ui): explicitly disable dragging and text selection inside dropdown menus globally
This commit is contained in:
G30
2026-02-22 15:30:43 -06:00
committed by GitHub
parent 5b9efeef4d
commit c0096b2a53
2 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Navbar/Menu.svelte
+16 -16
View File
@@ -279,13 +279,13 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition" class="select-none w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
sideOffset={8} sideOffset={8}
side="bottom" side="bottom"
align="end" align="end"
transition={flyAndScale} transition={flyAndScale}
> >
<!-- <DropdownMenu.Item <!-- <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer dark:hover:bg-gray-800 rounded-xl"
on:click={async () => { on:click={async () => {
await showSettings.set(!$showSettings); await showSettings.set(!$showSettings);
@@ -314,7 +314,7 @@
</DropdownMenu.Item> --> </DropdownMenu.Item> -->
{#if $mobile && ($user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true))} {#if $mobile && ($user?.role === 'admin' || ($user?.permissions.chat?.controls ?? true))}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-controls-button" id="chat-controls-button"
on:click={async () => { on:click={async () => {
@@ -329,7 +329,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
@@ -344,7 +344,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{#if ($artifactContents ?? []).length > 0} {#if ($artifactContents ?? []).length > 0}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-overview-button" id="chat-overview-button"
on:click={async () => { on:click={async () => {
@@ -362,7 +362,7 @@
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
{#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))} {#if !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-share-button" id="chat-share-button"
on:click={() => { on:click={() => {
@@ -375,7 +375,7 @@
{/if} {/if}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Download strokeWidth="1.5" /> <Download strokeWidth="1.5" />
@@ -383,12 +383,12 @@
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
<DropdownMenu.SubContent <DropdownMenu.SubContent
class="w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden" class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale} transition={flyAndScale}
sideOffset={8} sideOffset={8}
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadJSONExport(); downloadJSONExport();
@@ -397,7 +397,7 @@
<div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('Export chat (.json)')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadTxt(); downloadTxt();
@@ -406,7 +406,7 @@
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadPdf(); downloadPdf();
@@ -417,7 +417,7 @@
</DropdownMenu.SubContent> </DropdownMenu.SubContent>
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
id="chat-copy-button" id="chat-copy-button"
on:click={async () => { on:click={async () => {
@@ -439,7 +439,7 @@
{#if $folders.length > 0} {#if $folders.length > 0}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Folder strokeWidth="1.5" /> <Folder strokeWidth="1.5" />
@@ -447,13 +447,13 @@
<div class="flex items-center">{$i18n.t('Move')}</div> <div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
<DropdownMenu.SubContent <DropdownMenu.SubContent
class="w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden" class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale} transition={flyAndScale}
sideOffset={8} sideOffset={8}
> >
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
{#if folder?.id} {#if folder?.id}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
moveChatHandler(chat.id, folder.id); moveChatHandler(chat.id, folder.id);
@@ -469,7 +469,7 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
src/lib/components/layout/Sidebar/ChatMenu.svelte
+15 -15
View File
@@ -294,14 +294,14 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition" class="select-none w-full max-w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"
transition={flyAndScale} transition={flyAndScale}
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
shareHandler(); shareHandler();
@@ -313,7 +313,7 @@
{/if} {/if}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
> >
<Download strokeWidth="1.5" /> <Download strokeWidth="1.5" />
@@ -321,12 +321,12 @@
<div class="flex items-center">{$i18n.t('Download')}</div> <div class="flex items-center">{$i18n.t('Download')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
<DropdownMenu.SubContent <DropdownMenu.SubContent
class="w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800" class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
transition={flyAndScale} transition={flyAndScale}
sideOffset={8} sideOffset={8}
> >
{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)} {#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
downloadJSONExport(); downloadJSONExport();
@@ -336,7 +336,7 @@
</DropdownMenu.Item> </DropdownMenu.Item>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
downloadTxt(); downloadTxt();
@@ -345,7 +345,7 @@
<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div> <div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
on:click={() => { on:click={() => {
downloadPdf(); downloadPdf();
@@ -356,7 +356,7 @@
</DropdownMenu.SubContent> </DropdownMenu.SubContent>
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
renameHandler(); renameHandler();
@@ -368,7 +368,7 @@
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" /> <hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
pinHandler(); pinHandler();
@@ -383,7 +383,7 @@
{/if} {/if}
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
cloneChatHandler(); cloneChatHandler();
@@ -395,7 +395,7 @@
{#if chatId && $folders.length > 0} {#if chatId && $folders.length > 0}
<DropdownMenu.Sub> <DropdownMenu.Sub>
<DropdownMenu.SubTrigger <DropdownMenu.SubTrigger draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl select-none w-full"
> >
<Folder /> <Folder />
@@ -403,12 +403,12 @@
<div class="flex items-center">{$i18n.t('Move')}</div> <div class="flex items-center">{$i18n.t('Move')}</div>
</DropdownMenu.SubTrigger> </DropdownMenu.SubTrigger>
<DropdownMenu.SubContent <DropdownMenu.SubContent
class="w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden" class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
transition={flyAndScale} transition={flyAndScale}
sideOffset={8} sideOffset={8}
> >
{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder} {#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
moveChatHandler(chatId, folder.id); moveChatHandler(chatId, folder.id);
@@ -423,7 +423,7 @@
</DropdownMenu.Sub> </DropdownMenu.Sub>
{/if} {/if}
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
archiveChatHandler(); archiveChatHandler();
@@ -433,7 +433,7 @@
<div class="flex items-center">{$i18n.t('Archive')}</div> <div class="flex items-center">{$i18n.t('Archive')}</div>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item <DropdownMenu.Item draggable="false"
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => { on:click={() => {
deleteHandler(); deleteHandler();