From 14937616fe1459d9d1e7fcd5228e37ba30900796 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Thu, 26 Dec 2024 13:56:27 +0100
Subject: [PATCH] (search) clicking / tapping outside of the dialogue closes it

---
 components/search/SearchDialogue.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/search/SearchDialogue.vue b/components/search/SearchDialogue.vue
index dea2ea0bb..a3cccc024 100644
--- a/components/search/SearchDialogue.vue
+++ b/components/search/SearchDialogue.vue
@@ -50,6 +50,16 @@ onUnmounted(() => {
     document.removeEventListener('keydown', onKeydown);
 });
 
+const onMousedown = (event: MouseEvent) => {
+    const rect = dialogue.value?.getBoundingClientRect();
+    if (rect && (
+        event.clientX < rect.left || event.clientX > rect.right ||
+        event.clientY < rect.top || event.clientY > rect.bottom)
+    ) {
+        close();
+    }
+};
+
 const router = useRouter();
 watch(router.currentRoute, () => {
     close();
@@ -59,7 +69,7 @@ defineExpose({ open, close });
 </script>
 
 <template>
-    <dialog ref="dialogue" class="container m-auto h-100 rounded border">
+    <dialog ref="dialogue" class="container m-auto h-100 rounded border" @mousedown="onMousedown">
         <div class="input-group mb-4">
             <span class="input-group-text">
                 <Spinner v-if="isLoading" size="1.25em" />