github/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-06-08 10:51:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): clicking away closes context menu (#16989)

Browse Source 
* fix(web): clicking away closes context menu

* fix: use pointerdown event instead

* Revert "fix: use pointerdown event instead"

This reverts commit 0d2cf4719458a1d3804c43c3877297aaf41bc107.
This commit is contained in:
Ben 2025-03-21 09:39:41 -04:00 committed by GitHub
parent bcd9248b43
commit 3c87341902
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 2 deletions
Show Stats 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}
> >