From 281985480de799786424c4279af068004d7901ad Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 25 Jun 2021 19:23:35 +0200
Subject: [PATCH] Fix some WithDropdownMenu logic

---
 ts/components/WithDropdownMenu.svelte | 13 +++++++------
 ts/editor/Tag.svelte                  |  3 ++-
 ts/editor/TagAutocomplete.svelte      | 18 +++++++++++++++---
 ts/editor/TagEditor.svelte            | 18 +++++++++++++-----
 ts/editor/TagInput.svelte             |  3 ++-
 5 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index 96d23470d..e53bb15c9 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -17,10 +17,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 
     const menuId = Math.random().toString(36).substring(2);
-    let dropdown: Dropdown;
+    let dropdown: Dropdown | undefined;
 
     function activateDropdown(): void {
-        if (!disabled) {
+        if (dropdown && !disabled) {
             dropdown.toggle();
         }
     }
@@ -30,10 +30,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function createDropdown(element: HTMLElement): Dropdown {
         /* Prevent focus on menu activation */
         const noop = () => {};
-        Object.defineProperty(element, "focus", { value: noop });
+        Object.defineProperty(element, "focus", { value: noop, configurable: true });
 
-        const menu = (element.getRootNode() as Document) /* or shadow root */
-            .getElementById(menuId);
+        const menu = (element.getRootNode() as Document | ShadowRoot).getElementById(
+            menuId
+        );
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
@@ -44,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             (dropdown as any)._menu = menu;
         }
 
-        return dropdown;
+        return dropdown as Dropdown;
     }
 </script>
 
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index ba6f1a337..6c7b6ddf8 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -41,7 +41,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <TagInput
         bind:name
         bind:input
-        on:focusout={() => (active = false)}
+        on:focus
+        on:blur={() => (active = false)}
         on:tagupdate={updateTag}
         on:tagadd
         on:tagjoinprevious
diff --git a/ts/editor/TagAutocomplete.svelte b/ts/editor/TagAutocomplete.svelte
index 8bc6b7b5f..81f9efddd 100644
--- a/ts/editor/TagAutocomplete.svelte
+++ b/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 type Dropdown from "bootstrap/js/dist/dropdown";
+
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
     import DropdownMenu from "components/DropdownMenu.svelte";
     import DropdownItem from "components/DropdownItem.svelte";
@@ -12,6 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
+    let autocomplete: Dropdown | undefined;
+
     function switchUpDown(event: KeyboardEvent): void {
         const target = event.currentTarget as HTMLButtonElement;
         if (event.code === "ArrowUp") {
@@ -28,14 +32,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             event.preventDefault();
         }
     }
+
+    const createAutocomplete =
+        (createDropdown: (element: HTMLElement) => Dropdown) =>
+        (element: HTMLElement) => {
+            autocomplete = createDropdown(element);
+            autocomplete.show();
+            return autocomplete;
+        };
 </script>
 
-<WithDropdownMenu let:menuId let:createDropdown let:activateDropdown>
-    <slot {createDropdown} {activateDropdown} />
+<WithDropdownMenu let:menuId let:createDropdown>
+    <slot createAutocomplete={createAutocomplete(createDropdown)} />
 
     <DropdownMenu id={menuId} class={className}>
         {#each suggestions as tag}
-            <DropdownItem on:keydown={switchUpDown}>{tag}</DropdownItem>
+            <DropdownItem>{tag}</DropdownItem>
         {/each}
     </DropdownMenu>
 </WithDropdownMenu>
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index a8229fd67..62816c5b6 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -22,6 +22,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let newName: string = "";
 
     function focusNewInput(): void {
+        if (document.activeElement === newInput) {
+            // refocus
+            newInput.blur();
+        }
+
+        console.log("focus");
         newInput.focus();
     }
 
@@ -94,17 +100,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <StickyBottom>
     <div class="row-gap">
         <ButtonToolbar class="dropup d-flex flex-wrap align-items-center" {size}>
+            <AddTagBadge on:click={focusNewInput} />
+
             <TagAutocomplete
                 class="d-flex flex-column-reverse"
                 {suggestions}
-                let:createDropdown
-                let:activateDropdown
+                let:createAutocomplete
             >
-                <AddTagBadge on:click={focusNewInput} />
-
                 {#each tags as tag, index (tag.id)}
                     <Tag
                         bind:name={tag.name}
+                        on:keydown
+                        on:focus={(event) => createAutocomplete(event.target)}
                         on:tagupdate={() => checkForDuplicateAt(index)}
                         on:tagadd={() => insertTagAt(index)}
                         on:tagdelete={() => deleteTagAt(index)}
@@ -116,7 +123,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <TagInput
                     bind:input={newInput}
                     bind:name={newName}
-                    on:focus={(event) => createDropdown(event.currentTarget)}
+                    on:focus={(event) => createAutocomplete(event.target)}
+                    on:keydown
                     on:tagupdate={appendTag}
                     on:tagadd={appendTag}
                     on:tagjoinprevious={joinWithLastTag}
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index 67a02f5e4..48f790313 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -51,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             onAccept();
             event.preventDefault();
         }
+        console.log("keydown");
     }
 
     function onPaste(event: ClipboardEvent): void {
@@ -96,7 +97,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         size="1"
         bind:value={name}
         on:focus
-        on:focusout
+        on:blur
         on:blur={onAccept}
         on:keydown={onKeydown}
         on:paste={onPaste}