Show Autocomplete on keydown, hide on blur

ts/editor/Tag.svelte

@@ -43,6 +43,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bind:input
         on:focus
         on:blur={() => (active = false)}
+        on:blur
+        on:keydown
         on:tagupdate={updateTag}
         on:tagadd
         on:tagjoinprevious

ts/editor/TagAutocomplete.svelte

@@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     let autocomplete: Dropdown | undefined;
+    let displayed: string[] = [];
 
     function switchUpDown(event: KeyboardEvent): void {
         const target = event.currentTarget as HTMLButtonElement;
@@ -33,16 +34,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    const createAutocomplete =
+    const updateAutocomplete =
         (createDropdown: (element: HTMLElement) => Dropdown) =>
-        (element: HTMLElement) => {
+        (event: KeyboardEvent): Dropdown => {
-            autocomplete = createDropdown(element);
+            const target = event.target as HTMLElement;
+            autocomplete = createDropdown(target);
+            autocomplete.show();
+
             return autocomplete;
         };
+
+    function destroyAutocomplete(): void {
+        if (!autocomplete) {
+            return;
+        }
+
+        autocomplete.hide();
+    }
 </script>
 
 <WithDropdownMenu let:menuId let:createDropdown>
-    <slot createAutocomplete={createAutocomplete(createDropdown)} />
+    <slot
+        updateAutocomplete={updateAutocomplete(createDropdown)}
+        {destroyAutocomplete}
+    />
 
     <DropdownMenu id={menuId} class={className}>
         {#each suggestions as tag}

ts/editor/TagEditor.svelte

@@ -27,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             newInput.blur();
         }
 
-        console.log("focus");
         newInput.focus();
     }
 
@@ -105,13 +104,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <TagAutocomplete
                 class="d-flex flex-column-reverse"
                 {suggestions}
-                let:createAutocomplete
+                let:updateAutocomplete
+                let:destroyAutocomplete
             >
                 {#each tags as tag, index (tag.id)}
                     <Tag
                         bind:name={tag.name}
-                        on:keydown
+                        on:keydown={updateAutocomplete}
-                        on:focus={(event) => createAutocomplete(event.target)}
+                        on:blur={destroyAutocomplete}
                         on:tagupdate={() => checkForDuplicateAt(index)}
                         on:tagadd={() => insertTagAt(index)}
                         on:tagdelete={() => deleteTagAt(index)}
@@ -123,8 +123,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <TagInput
                     bind:input={newInput}
                     bind:name={newName}
-                    on:focus={(event) => createAutocomplete(event.target)}
+                    on:keydown={updateAutocomplete}
-                    on:keydown
+                    on:blur={destroyAutocomplete}
                     on:tagupdate={appendTag}
                     on:tagadd={appendTag}
                     on:tagjoinprevious={joinWithLastTag}

ts/editor/TagInput.svelte

@@ -51,7 +51,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             onAccept();
             event.preventDefault();
         }
-        console.log("keydown");
     }
 
     function onPaste(event: ClipboardEvent): void {
@@ -100,6 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:blur
         on:blur={onAccept}
         on:keydown={onKeydown}
+        on:keydown
         on:paste={onPaste}
         on:click
     />