Delete when updating tagname to empty text

ts/components/DropdownItem.svelte

@@ -28,6 +28,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-night={nightMode}
     title={tooltip}
     on:click
+    on:focus
+    on:keydown
     on:mousedown|preventDefault
 >
     <slot />
@@ -43,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         font-size: calc(var(--buttons-size) / 2.3);
 
         background: none;
-        box-shadow: none;
+        box-shadow: none !important;
         border: none;
     }
 

ts/editor/Tag.svelte

@@ -21,12 +21,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     function deleteTag(event: Event): void {
-        dispatch("tagdelete", { name });
+        dispatch("tagdelete");
         event.stopPropagation();
     }
 
-    function updateTag() {
+    function updateTag(event: Event) {
         active = false;
+
+        if (name.length === 0) {
+            deleteTag(event);
+        }
     }
 </script>
 
@@ -41,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 {:else}
     <span
         class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"
-        on:click|stopPropagation={checkForActivation}
+        on:click={checkForActivation}
     >
         <span>{name}</span>
         <Badge class="delete-icon rounded ms-1 mt-1" on:click={deleteTag}

ts/editor/TagAutocomplete.svelte

@@ -3,7 +3,7 @@ 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, onMount, onDestroy } from "svelte";
+    import { createEventDispatcher } from "svelte";
 
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
@@ -27,43 +27,60 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         event.preventDefault();
     }
 
-    function onKeydown(event: KeyboardEvent) {
+    function switchUpDown(event: KeyboardEvent): void {
+        const target = event.currentTarget as HTMLButtonElement;
+        console.log(
+            event.code,
+            target.nextElementSibling,
+            target.previousElementSibling
+        );
         if (event.code === "ArrowUp") {
-            activeItem = activeItem === tagValues.length - 1 ? 0 : ++activeItem;
-            name = tagValues[activeItem];
+            if (target.nextElementSibling) {
+                (target.nextElementSibling as HTMLButtonElement).focus();
+            }
+
             event.preventDefault();
         } else if (event.code === "ArrowDown") {
-            activeItem = activeItem === 0 ? tagValues.length - 1 : --activeItem;
-            name = tagValues[activeItem];
+            if (target.previousElementSibling) {
+                (target.previousElementSibling as HTMLButtonElement).focus();
+            }
+
             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"); */
-            /* } */
         }
     }
+
+    function updateActiveItem(even: FocusEvent): void {}
+
+    /* 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"); */
+    /* } */
+    /* } */
 </script>
 
-<div bind:this={menu} class="dropup dropdown-reverse" on:keydown={onKeydown}>
+<div bind:this={menu} class="dropup dropdown-reverse">
     <slot {triggerId} {triggerClass} {dropdown} />
 
     <DropdownMenu labelledby={triggerId}>
         {#each suggestions as tag}
-            <DropdownItem>{tag}</DropdownItem>
+            <DropdownItem on:focus={updateActiveItem} on:keydown={switchUpDown}
+                >{tag}</DropdownItem
+            >
         {/each}
     </DropdownMenu>
 </div>
 
 <style lang="scss">
-    /* .dropdown-reverse :global(.dropdown-menu) { */
-    /*     display: flex; */
-    /*     flex-direction: column-reverse; */
-    /* } */
+    .dropdown-reverse :global(.dropdown-menu.show) {
+        display: flex;
+        flex-direction: column-reverse;
+        font-size: 13px;
+    }
 </style>

ts/editor/TagEditor.svelte

@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Tag from "./Tag.svelte";
     import TagInput from "./TagInput.svelte";
 
-    export let tags = ["en::foobar", "zh::あっちこっち"];
+    export let tags = ["en::foobar", "zh::あっちこっち", "test", "def"];
 
     let tagInputNew: HTMLInputElement;
     let newName: string = "";
@@ -17,12 +17,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         tagInputNew.focus();
     }
 
-    function deleteTag({ detail }: CustomEvent) {
-        tags.splice(tags.indexOf(detail.name), 1);
+    function deleteTag(index: number): void {
+        tags.splice(index, 1);
         tags = tags;
     }
 
-    function addTag() {
+    function addTag(): void {
         if (!tags.includes(newName) && newName.length > 0) {
             tags.push(newName);
         }
@@ -35,11 +35,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="d-flex flex-wrap">
         <AddTagBadge on:click={focusInputNew} />
 
-        {#each tags as tag}
-            <Tag name={tag} on:tagdelete={deleteTag} />
+        {#each tags as tag, index}
+            <Tag bind:name={tag} on:tagdelete={() => deleteTag(index)} />
         {/each}
 
-        <TagInput bind:input={tagInputNew} name={newName} on:tagupdate={addTag} />
+        <TagInput bind:input={tagInputNew} bind:name={newName} on:tagupdate={addTag} />
     </div>
 </StickyBottom>
 

ts/editor/TagInput.svelte

@@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type Dropdown from "bootstrap/js/dist/dropdown";
-
     import { createEventDispatcher, onMount } from "svelte";
     import { normalizeTagname } from "./tags";
 
@@ -15,21 +13,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const dispatch = createEventDispatcher();
 
-    function onFocus(event: FocusEvent, dropdown: Dropdown): void {
+    function onFocus(): void {
         /* dropdown.show(); */
     }
 
-    function onAccept(event: Event): void {
+    function onAccept(): void {
         name = normalizeTagname(name);
         dispatch("tagupdate", { name });
     }
 
-    function dropdownBlur(event: Event, dropdown: Dropdown): void {
-        onAccept(event);
+    function dropdownBlur(): void {
+        onAccept();
         /* dropdown.hide(); */
     }
 
-    function onKeydown(event: KeyboardEvent, dropdown: Dropdown): void {
+    function onKeydown(event: KeyboardEvent): void {
         if (event.code === "Space") {
             name += "::";
             event.preventDefault();
@@ -37,7 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             name = name.slice(0, -2);
             event.preventDefault();
         } else if (event.code === "Enter") {
-            onAccept(event);
+            onAccept();
             event.preventDefault();
         }
     }
@@ -66,7 +64,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     bind:name
     let:triggerId
     let:triggerClass
-    let:dropdown
     on:nameChosen={setTagname}
     on:accept={onAccept}
 >
@@ -84,10 +81,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tabindex="-1"
             size="1"
             bind:value={name}
-            on:focus={(event) => onFocus(event, dropdown)}
-            on:blur={(event) => dropdownBlur(event, dropdown)}
+            on:focus={onFocus}
+            on:blur={dropdownBlur}
             on:focusout
-            on:keydown={(event) => onKeydown(event, dropdown)}
+            on:keydown={onKeydown}
             on:paste={onPaste}
             on:click
         />