Implement accepting suggestions via Enter

ts/editor/AutocompleteItem.svelte

@@ -51,8 +51,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         border: none;
 
         &.active {
-            background-color: button.$focus-color;
+            background-color: button.$focus-color !important;
-            color: white;
+            color: white !important;
         }
     }
 

ts/editor/TagEditor.svelte

@@ -32,13 +32,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let activeName = "";
     let activeInput: HTMLInputElement;
 
-    function onAutocomplete({ detail }) {
-        const activeTag = tags[active!];
-        const selected = detail.selected;
-
-        activeName = selected ?? activeTag.name;
-    }
-
     let suggestionsPromise: Promise<string[]> = Promise.resolve([]);
 
     function updateSuggestions(): void {
@@ -49,6 +42,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         ]);
     }
 
+    function onAutocomplete(selected: string): void {
+        const activeTag = tags[active!];
+
+        activeName = selected ?? activeTag.name;
+        activeInput.setSelectionRange(Infinity, Infinity);
+    }
+
+    function onChosen(chosen: string) {
+        onAutocomplete(chosen);
+        splitTag(active!, Infinity, Infinity);
+    }
+
     function updateWithTagName(tag: TagType): void {
         tag.name = activeName;
         tags = tags;
@@ -96,13 +101,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             contained
         );
         if (contained >= 0) {
-            tags[contained].flash();
+            tags[contained >= index ? contained + 1 : contained].flash();
             return false;
         }
 
         return true;
     }
 
+    async function enterBehavior(
+        index: number,
+        start: number,
+        end: number,
+        autocomplete: any
+    ): Promise<void> {
+        if (autocomplete.isVisible()) {
+            autocomplete.chooseSelected();
+        } else {
+            splitTag(index, start, end);
+        }
+    }
+
     async function splitTag(index: number, start: number, end: number): Promise<void> {
         const current = activeName.slice(0, start);
         const splitOff = activeName.slice(end);
@@ -271,8 +289,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <WithAutocomplete
                         class="d-flex flex-column-reverse"
                         {suggestionsPromise}
-                        on:autocomplete={onAutocomplete}
                         on:update={updateSuggestions}
+                        on:autocomplete={({ detail }) =>
+                            onAutocomplete(detail.selected)}
+                        on:choose={({ detail }) => onChosen(detail.chosen)}
                         let:createAutocomplete
                         let:autocomplete
                     >
@@ -280,7 +300,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             id={tag.id}
                             bind:name={activeName}
                             bind:input={activeInput}
-                            on:click={(event) => event.stopPropagation()}
                             on:focus={() => {
                                 activeName = tag.name;
                                 createAutocomplete(activeInput);
@@ -288,7 +307,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             on:keydown={(event) => update(event, autocomplete)}
                             on:input={() => updateWithTagName(tag)}
                             on:tagsplit={({ detail }) =>
-                                splitTag(index, detail.start, detail.end)}
+                                enterBehavior(
+                                    index,
+                                    detail.start,
+                                    detail.end,
+                                    autocomplete
+                                )}
                             on:tagadd={() => insertTag(index)}
                             on:tagdelete={() => deleteTagAt(index)}
                             on:tagjoinprevious={() => joinWithPreviousTag(index)}

ts/editor/TagInput.svelte

@@ -87,6 +87,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onEnter(event: Event): void {
         event.preventDefault();
         dispatch("tagsplit", { start: input.selectionStart, end: input.selectionEnd });
+        event.preventDefault();
     }
 
     function onKeydown(event: KeyboardEvent): void {

ts/editor/WithAutocomplete.svelte

@@ -19,9 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let target: HTMLElement;
     let dropdown: Dropdown;
     let autocomplete: any;
-    let selected: number | null = null;
 
-    // blue highlight
+    let selected: number | null = null;
     let active: boolean = false;
 
     const dispatch = createEventDispatcher();
@@ -54,8 +53,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
     }
 
-    function chooseSelected() {
+    async function chooseSelected() {
+        const suggestions = await suggestionsPromise;
+
         active = true;
+        dispatch("choose", { chosen: suggestions[selected ?? -1] });
     }
 
     async function update() {
@@ -102,7 +104,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     async function chooseIndex(index: number): Promise<void> {
         const suggestions = await suggestionsPromise;
-        dispatch("autocomplete", { selected: suggestions[index] });
+        dispatch("autocomplete", { name: suggestions[index] });
     }
 
     function selectIfMousedown(event: MouseEvent, index: number): void {