From 376f5436803af335f786e8a59a99ac2505bcf265 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 29 Jun 2021 20:13:28 +0200
Subject: [PATCH] Make automatic deselect when leaving tag editor

---
 ts/components/ButtonToolbar.svelte |  1 +
 ts/editor/TagEditor.svelte         | 22 ++++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte
index a81e3cc6f..245e8c950 100644
--- a/ts/components/ButtonToolbar.svelte
+++ b/ts/components/ButtonToolbar.svelte
@@ -81,6 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class={`btn-toolbar container wrap-variable ${className}`}
     {style}
     role="toolbar"
+    on:focusout
 >
     <slot />
     {#each $dynamicItems as item}
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index c5388e499..d0aec2b98 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -278,10 +278,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             autocomplete.hide();
         }
     }
+
+    function deselect() {
+        tags = tags.map((tag: TagType): TagType => ({ ...tag, selected: false }));
+    }
+
+    function deselectIfLeave(event: FocusEvent) {
+        const toolbar = event.currentTarget as HTMLDivElement;
+        if (!toolbar.contains(event.relatedTarget as Element)) {
+            deselect();
+        }
+    }
 </script>
 
 <StickyBottom>
-    <ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
+    <ButtonToolbar
+        class="dropup d-flex flex-wrap align-items-center"
+        {size}
+        on:focusout={deselectIfLeave}
+    >
         <div class="pb-1">
             <AddTagBadge on:click={appendEmptyTag} />
         </div>
@@ -338,7 +353,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         name={tag.name}
                         bind:flash={tag.flash}
                         bind:selected={tag.selected}
-                        on:tagedit={() => (active = index)}
+                        on:tagedit={() => {
+                            active = index;
+                            deselect();
+                        }}
                         on:tagrange={console.log}
                         on:tagdelete={() => {
                             deleteTagAt(index);