Use our DropdownMenu component for TagAutocomplete

ts/components/DropdownMenu.svelte

@@ -7,11 +7,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { dropdownKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
+    export let labelledby: string | undefined = undefined;
 
     setContext(dropdownKey, null);
 </script>
 
-<div {id} class="dropdown-menu">
+<div {id} class="dropdown-menu" aria-labelledby={labelledby}>
     <slot />
 </div>
 

ts/editor/Tag.svelte

@@ -17,10 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function checkForActivation(): void {
         const selection = window.getSelection()!;
-        if (selection.isCollapsed) {
-            active = true;
-            input.focus();
-        }
+        active = selection.isCollapsed;
     }
 
     function deleteTag(event: Event): void {

ts/editor/TagAutocomplete.svelte

@@ -4,28 +4,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { createEventDispatcher, onMount, onDestroy } from "svelte";
-    import Dropdown from "bootstrap/js/dist/dropdown";
+
+    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownItem from "components/DropdownItem.svelte";
 
     export let name: string;
+    export const suggestions = ["en::idioms", "anki::functionality", "math"];
 
     const dispatch = createEventDispatcher();
     const triggerId = "tagLabel" + String(Math.random()).slice(2);
     const triggerClass = "dropdown-toggle";
 
-    let originalName = name;
     let menu: HTMLDivElement;
     let dropdown;
     let activeItem = -1;
 
-    const tagSuggestions = ["en::idioms", "anki::functionality", "math"];
-    $: tagValues = [...tagSuggestions, originalName];
-
-    onMount(() => {
-        const toggle = menu.querySelector(`#${triggerId}`)!;
-        dropdown = new Dropdown(toggle, {
-            reference: "parent",
-        });
-    });
+    $: tagValues = [...suggestions, name];
 
     function onItemClick(event: Event) {
         dispatch("nameChosen", { name: event.currentTarget!.innerText });
@@ -43,56 +37,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             name = tagValues[activeItem];
             event.preventDefault();
         } else if (event.code === "Enter") {
-            const dropdownActive = dropdown._element.classList.contains("show");
-            if (dropdownActive) {
-                if (typeof activeItem === "number") {
-                    name = tagValues[activeItem];
-                    activeItem = null;
-                }
-                dropdown.hide();
-            } else {
-                dispatch("accept");
-            }
+            /* const dropdownActive = dropdown._element.classList.contains("show"); */
+            /* if (dropdownActive) { */
+            /*     if (typeof activeItem === "number") { */
+            /*         name = tagValues[activeItem]; */
+            /*         activeItem = null; */
+            /*     } */
+            /*     dropdown.hide(); */
+            /* } else { */
+            /*     dispatch("accept"); */
+            /* } */
         }
     }
 </script>
 
-<div class="dropdown" bind:this={menu} on:keydown={onKeydown}>
+<div bind:this={menu} class="dropdown dropdown-reverse" on:keydown={onKeydown}>
     <slot {triggerId} {triggerClass} {dropdown} />
 
-    <ul class="dropdown-menu" aria-labelledby={triggerId}>
-        {#each tagSuggestions as tag, index}
-            <li>
-                <a
-                    href="#/"
-                    class="dropdown-item"
-                    class:dropdown-item-active={activeItem === index}
-                    on:click={onItemClick}
-                >
-                    {tag}
-                </a>
-            </li>
+    <DropdownMenu labelledby={triggerId}>
+        {#each suggestions as tag}
+            <DropdownItem>{tag}</DropdownItem>
         {/each}
-    </ul>
+    </DropdownMenu>
 </div>
 
 <style lang="scss">
-    :global(.show).dropdown-menu {
+    .dropdown-reverse :global(.dropdown-menu) {
         display: flex;
         flex-direction: column-reverse;
     }
-    .dropdown-item {
-        padding: 0rem 0.3rem;
-        font-size: smaller;
-        &:focus {
-            outline: none;
-        }
-    }
-    .dropdown-item:hover {
-        background-color: #c3c5c7;
-    }
-    .dropdown-item-active {
-        color: #1e2125;
-        background-color: #c3c5c7;
-    }
 </style>

ts/editor/TagEditor.svelte

@@ -22,10 +22,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tags = tags;
     }
 
-    function addTag({ detail }: CustomEvent) {
-        if (!tags.includes(detail.name) && detail.name.length > 0) {
-            tags.push(detail.name);
+    function addTag() {
+        if (!tags.includes(newName) && newName.length > 0) {
+            tags.push(newName);
         }
+        newName = "";
         tags = tags;
     }
 </script>

ts/editor/TagInput.svelte

@@ -16,17 +16,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const dispatch = createEventDispatcher();
 
     function onFocus(event: FocusEvent, dropdown: Dropdown): void {
-        dropdown.show();
+        /* dropdown.show(); */
     }
 
     function onAccept(event: Event): void {
-        dispatch("tagupdate", { name: normalizeTagname(name) });
-        input.value = "";
+        name = normalizeTagname(name);
+        dispatch("tagupdate", { name });
     }
 
     function dropdownBlur(event: Event, dropdown: Dropdown): void {
         onAccept(event);
-        dropdown.hide();
+        /* dropdown.hide(); */
     }
 
     function onKeydown(event: KeyboardEvent, dropdown: Dropdown): void {