Allow clicking on suggestion items

ts/components/WithDropdown.svelte

@@ -12,6 +12,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let autoClose: boolean | "inside" | "outside" = true;
 
     export let placement = "bottom-start";
+    export let drop: "down" | "up" | "left" | "right" = "down";
+
+    $: dropClass = `drop${drop}`;
 
     setContext(dropdownKey, {
         dropdown: true,
@@ -59,7 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onDestroy(() => dropdown?.dispose());
 </script>
 
-<div class="dropdown">
+<div class={dropClass}>
     <slot {createDropdown} dropdownObject={api} />
 </div>
 

ts/editor/AutocompleteItem.svelte

@@ -30,9 +30,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-night={nightMode}
     class:selected
     class:active
+    on:mousedown|preventDefault
     on:mouseup
     on:mouseenter
-    on:mousedown|preventDefault
+    on:mouseleave
 >
     <slot />
 </button>

ts/editor/TagEditor.svelte

@@ -358,7 +358,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <StickyBottom>
     <ButtonToolbar
-        class="dropup d-flex flex-wrap align-items-center"
+        class="d-flex flex-wrap align-items-center"
         {size}
         on:focusout={deselectIfLeave}
     >
@@ -395,11 +395,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {#if index === active}
                     <div class="adjust-position">
                         <WithAutocomplete
-                            class="d-flex flex-column-reverse dropup"
+                            drop="up"
+                            class="d-flex flex-column-reverse"
                             {suggestionsPromise}
                             on:update={updateSuggestions}
-                            on:autocomplete={({ detail }) =>
-                                onAutocomplete(detail.selected)}
+                            on:select={({ detail }) => onAutocomplete(detail.selected)}
                             on:choose={({ detail }) => onChosen(detail.chosen)}
                             let:createAutocomplete
                         >

ts/editor/WithAutocomplete.svelte

@@ -14,6 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
+    export let drop: "down" | "up" | "left" | "right" = "down";
+
     export let suggestionsPromise: Promise<string[]>;
 
     let target: HTMLElement;
@@ -35,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             selected++;
         }
 
-        dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        dispatch("select", { selected: suggestions[selected ?? -1] });
     }
 
     async function selectPrevious() {
@@ -49,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             selected--;
         }
 
-        dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
+        dispatch("select", { selected: suggestions[selected ?? -1] });
     }
 
     async function chooseSelected() {
@@ -100,11 +102,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function setSelected(index: number): void {
         selected = index;
+        active = true;
     }
 
-    async function chooseIndex(index: number): Promise<void> {
+    function setSelectedAndActive(index: number): void {
+        setSelected(index);
+    }
+
+    async function selectIndex(index: number): Promise<void> {
         const suggestions = await suggestionsPromise;
-        dispatch("autocomplete", { name: suggestions[index] });
+        active = false;
+        dispatch("select", { selected: suggestions[index] });
     }
 
     function selectIfMousedown(event: MouseEvent, index: number): void {
@@ -114,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<WithDropdown let:createDropdown>
+<WithDropdown {drop} let:createDropdown>
     <slot createAutocomplete={createAutocomplete(createDropdown)} />
 
     <DropdownMenu class={className}>
@@ -125,9 +133,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <AutocompleteItem
                     selected={index === selected}
                     active={index === selected && active}
-                    on:mousedown={() => setSelected(index)}
+                    on:mousedown={() => setSelectedAndActive(index)}
+                    on:mouseup={() => {
+                        selectIndex(index);
+                        chooseSelected();
+                    }}
                     on:mouseenter={(event) => selectIfMousedown(event, index)}
-                    on:mouseup={() => chooseIndex(index)}>{suggestion}</AutocompleteItem
+                    on:mouseleave={() => (active = false)}
+                    >{suggestion}</AutocompleteItem
                 >
             {/each}
         {/await}