Implement on:autocomplete

ts/editor/TagAutocomplete.svelte

@@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
+    import { createEventDispatcher } from "svelte";
+
     import type Dropdown from "bootstrap/js/dist/dropdown";
 
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
@@ -20,12 +22,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let displayed: string[] = [];
     let selected: number | null = null;
 
-    export let choice: string | undefined;
-    $: choice = displayed[selected ?? -1];
-
     // blue highlight
     let active: boolean = false;
 
+    const dispatch = createEventDispatcher();
+
     function select(index: number) {
         selected = index;
     }
@@ -51,6 +52,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 } else {
                     selected--;
                 }
+
+                const choice = displayed[selected ?? -1];
+                dispatch("autocomplete", { choice });
             } else if (event.code === "ArrowUp" || event.code === "Tab") {
                 event.preventDefault();
                 if (selected === null) {
@@ -60,6 +64,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 } else {
                     selected++;
                 }
+
+                const choice = displayed[selected ?? -1];
+                dispatch("autocomplete", { choice });
             } else if (event.code === "Enter") {
                 event.preventDefault();
                 active = true;

ts/editor/TagEditor.svelte

@@ -34,7 +34,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let activeAfterBlur: number | null = null;
     let activeName = "";
 
-    let autocompletionChoice: string | undefined;
+    function onAutocomplete({ detail }) {
+        const activeTag = tags[active!];
+        const autocompletionChoice = detail.choice;
+
+        console.log(autocompletionChoice, activeTag);
+        if (autocompletionChoice) {
+            activeName = autocompletionChoice;
+        } else {
+            activeName = activeTag.name;
+        }
+    }
+
+    function updateTagName() {
+        console.log("updatetagname");
+        const activeTag = tags[active!];
+        activeTag.name = activeName;
+        tags = tags;
+    }
 
     function setActiveAfterBlur(value: number): void {
         if (activeAfterBlur === null) {
@@ -206,7 +223,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 class="d-flex flex-column-reverse"
                 {suggestions}
                 search={tags[active ?? -1]?.name ?? ""}
-                bind:choice={autocompletionChoice}
+                on:autocomplete={onAutocomplete}
                 let:updateAutocomplete
                 let:destroyAutocomplete
             >
@@ -218,6 +235,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             bind:input
                             on:focus={() => (activeName = tag.name)}
                             on:keydown={updateAutocomplete}
+                            on:input={updateTagName}
                             on:tagsplit={({ detail }) =>
                                 splitTag(index, detail.start, detail.end)}
                             on:tagadd={() => insertTag(index)}
@@ -251,8 +269,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </TagAutocomplete>
 
             <div>
-                a, aab, an: {active}
+                a, aab, an, ac: {active}
-                {activeAfterBlur} "{activeName}";<br />{JSON.stringify(tags)}
+                {activeAfterBlur} "{activeName}";
+                <br />
+                {JSON.stringify(tags)}
             </div>
         </ButtonToolbar>
     </div>

ts/editor/TagInput.svelte

@@ -181,6 +181,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:blur={onBlur}
         on:keydown={onKeydown}
         on:keydown
+        on:input
         on:paste={onPaste}
     />
 </label>