self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-08-08 23:07:06 +02:00
Code Issues Releases Activity

fix(web): clicking away closes context menu

Browse Source
This commit is contained in:
ben-basten
2025-03-19 07:20:49 -04:00
parent 21954939cf
commit aa091804b8
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/lib/components/shared-components/context-menu/button-context-menu.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { clickOutside } from '$lib/actions/click-outside';
import { contextMenuNavigation } from '$lib/actions/context-menu-navigation'; import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
import { shortcuts } from '$lib/actions/shortcut'; import { shortcuts } from '$lib/actions/shortcut';
import CircleIconButton, { import CircleIconButton, {
@ -105,6 +104,19 @@
closeDropdown(); closeDropdown();
}; };
const handleDocumentClick = (event: MouseEvent) => {
if (!isOpen) {
return;
}
const target = event.target as Node | null;
if (buttonContainer?.contains(target)) {
return;
}
closeDropdown();
};
const focusButton = () => { const focusButton = () => {
const button = buttonContainer?.querySelector(`#${buttonId}`) as HTMLButtonElement | null; const button = buttonContainer?.querySelector(`#${buttonId}`) as HTMLButtonElement | null;
button?.focus(); button?.focus();
@ -118,6 +130,7 @@
</script> </script>
<svelte:window onresize={onResize} /> <svelte:window onresize={onResize} />
<svelte:document onclick={handleDocumentClick} />
<div <div
use:contextMenuNavigation={{ use:contextMenuNavigation={{
@ -129,7 +142,6 @@
selectedId: $selectedIdStore, selectedId: $selectedIdStore,
selectionChanged: (id) => ($selectedIdStore = id), selectionChanged: (id) => ($selectedIdStore = id),
}} }}
use:clickOutside={{ onOutclick: closeDropdown }}
onresize={onResize} onresize={onResize}
{...restProps} {...restProps}
> >