Implement decideAfterBlur and activeAfterBlur

ts/editor/TagEditor.svelte

@@ -16,11 +16,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let initialNames = ["en::foobar", "test", "def"];
     export let suggestions = ["en::idioms", "anki::functionality", "math"];
 
-    export let active: number | null = null;
-    export let input: HTMLInputElement;
-
     export let size = isApplePlatform() ? 1.6 : 2.0;
 
+    let active: number | null = null;
+    let activeAfterBlur: number | null = null;
+
+    let input: HTMLInputElement;
     let tags = initialNames.map(attachId);
 
     function isFirst(index: number): boolean {
@@ -31,6 +32,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return index === tags.length - 1;
     }
 
+    function decideNextActive() {
+        if (typeof active === "number") {
+            active = activeAfterBlur;
+        }
+
+        if (typeof activeAfterBlur === "number") {
+            active = activeAfterBlur;
+            activeAfterBlur = null;
+        }
+    }
+
     async function addEmptyTag(): Promise<void> {
         const lastTag = tags[tags.length - 1];
 
@@ -40,19 +52,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         const index = tags.push(attachId("")) - 1;
         tags = tags;
-        activate(index);
-    }
-
-    async function insertEmptyTagAt(index: number): Promise<void> {
-        tags.splice(index, 0, attachId(""));
-        tags = tags;
         active = index;
     }
 
-    async function appendEmptyTagAt(index: number): Promise<void> {
+    function insertEmptyTagAt(index: number): void {
+        tags.splice(index, 0, attachId(""));
+        tags = tags;
+        activeAfterBlur = index + 1;
+    }
+
+    function appendEmptyTagAt(index: number): void {
         tags.splice(index + 1, 0, attachId(""));
         tags = tags;
-        activate(index + 1);
+        activeAfterBlur = index + 1;
     }
 
     function checkIfContainsNameAt(index: number): boolean {
@@ -69,7 +81,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function addTagAt(index: number): void {
-        console.log("eyo");
         if (checkIfContainsNameAt(index)) {
             deleteTagAt(index);
             insertEmptyTagAt(index);
@@ -88,7 +99,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function deleteTagAt(index: number): void {
-        deactivate(index);
         tags.splice(index, 1);
         tags = tags;
     }
@@ -163,9 +173,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {#each tags as tag, index (tag.id)}
                     {#if index === active}
                         <TagInput
+                            id={tag.id}
                             bind:name={tag.name}
                             bind:input
-                            on:blur={() => deactivate(index)}
+                            on:blur={decideNextActive}
                             on:tagupdate={() => addTagAt(index)}
                             on:tagadd={() => insertTagAt(index)}
                             on:tagdelete={() => deleteTagAt(index)}

ts/editor/TagInput.svelte

@@ -3,9 +3,10 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { onMount, createEventDispatcher, tick } from "svelte";
+    import { onMount, onDestroy, createEventDispatcher, tick } from "svelte";
     import { normalizeTagname } from "./tags";
 
+    export let id: string | undefined = undefined;
     export let name: string;
     export let input: HTMLInputElement;
 
@@ -39,17 +40,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         dispatch(name.length > 0 ? "tagupdate" : "tagdelete");
     }
 
-    let acceptByEnter = true;
-
-    function onBlur(): void {
-        // do not cause double accept if accept causes blur
-        if (!acceptByEnter) {
-            onAccept();
-        }
-
-        acceptByEnter = false;
-    }
-
     async function joinWithPreviousTag(event: Event): Promise<void> {
         const length = input.value.length;
         dispatch("tagjoinprevious");
@@ -108,8 +98,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         } else if (event.code === "Delete") {
             onDelete(event);
         } else if (event.code === "Enter") {
-            onAccept();
+            /* onAccept(); */
-            acceptByEnter = true;
+            input.blur();
             event.preventDefault();
         }
     }
@@ -146,21 +136,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    onMount(() => {
+    onMount(() => input.focus());
-        console.log("focus", input);
-        input.focus();
-    });
 </script>
 
 <label class="ps-2 pe-1" data-value={name}>
     <input
+        {id}
         bind:this={input}
         bind:value={name}
         type="text"
         tabindex="-1"
         size="1"
         on:focus
-        on:blur={onBlur}
+        on:blur={onAccept}
         on:blur
         on:keydown={onKeydown}
         on:keydown