From 7bdf9aaf009f055d7e02937bb22eae978c2bf105 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 8 Sep 2021 14:27:46 +0200
Subject: [PATCH] Set disabled class on TagInput from WithAutocomplete

---
 ts/components/DropdownMenu.svelte |  2 +-
 ts/editor/AutocompleteItem.svelte |  2 +-
 ts/editor/TagEditor.svelte        | 19 ++++++++++++++-----
 ts/editor/TagInput.svelte         |  2 ++
 ts/editor/WithAutocomplete.svelte | 12 +++++-------
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte
index 5e09c50b2..2dc03e668 100644
--- a/ts/components/DropdownMenu.svelte
+++ b/ts/components/DropdownMenu.svelte
@@ -16,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <div {id} class="dropdown-menu" aria-labelledby={labelledby}>
-    <div class={`dropdown-content ${className}`}>
+    <div class="dropdown-content {className}">
         <slot />
     </div>
 </div>
diff --git a/ts/editor/AutocompleteItem.svelte b/ts/editor/AutocompleteItem.svelte
index 5d74617d5..6045acf89 100644
--- a/ts/editor/AutocompleteItem.svelte
+++ b/ts/editor/AutocompleteItem.svelte
@@ -22,9 +22,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <button
+    bind:this={buttonRef}
     {id}
     tabindex="-1"
-    bind:this={buttonRef}
     class="autocomplete-item btn {className}"
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 74ac7f070..a086be324 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -452,16 +452,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <div class="adjust-position">
                         <WithAutocomplete
                             drop="up"
-                            class="d-flex flex-column"
+                            class="d-flex flex-column cap-items"
                             {suggestionsPromise}
                             on:update={updateSuggestions}
                             on:select={({ detail }) => onAutocomplete(detail.selected)}
                             on:choose={({ detail }) => onAutocomplete(detail.chosen)}
                             let:createAutocomplete
+                            let:disabled
                         >
                             <TagInput
                                 id={tag.id}
-                                class="tag-input position-absolute top-0 start-0 ps-2 py-0"
+                                class="tag-input position-absolute start-0 top-0 ps-2 py-0"
+                                {disabled}
                                 bind:name={activeName}
                                 bind:input={activeInput}
                                 on:focus={() => {
@@ -529,8 +531,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
-    .adjust-position :global(.tag-input) {
-        /* recreates positioning of Tag component */
-        border-left: 1px solid transparent;
+    .adjust-position {
+        :global(.tag-input) {
+            /* recreates positioning of Tag component */
+            border-left: 1px solid transparent;
+        }
+
+        :global(.cap-items) {
+            max-height: 7rem;
+            overflow-y: scroll;
+        }
     }
 </style>
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index 2bdaf9b13..de6a4083d 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -17,6 +17,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let name: string;
     export let input: HTMLInputElement;
+    export let disabled: boolean;
 
     const dispatch = createEventDispatcher();
 
@@ -231,6 +232,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <input
     {id}
     class={className}
+    class:disabled
     bind:this={input}
     bind:value={name}
     type="text"
diff --git a/ts/editor/WithAutocomplete.svelte b/ts/editor/WithAutocomplete.svelte
index 7bbbc37ac..e1695ae3e 100644
--- a/ts/editor/WithAutocomplete.svelte
+++ b/ts/editor/WithAutocomplete.svelte
@@ -14,21 +14,20 @@ 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 drop: "down" | "up" = "down";
     export let suggestionsPromise: Promise<string[]>;
 
-    let target: HTMLElement;
+    let disabled = true;
     let dropdown: Dropdown;
 
     let suggestionsItems: string[] = [];
     $: suggestionsPromise.then((items) => {
         if (items.length > 0) {
-            // disabled class will tell Bootstrap not to show menu on clicking
-            target.classList.remove("disabled");
+            disabled = false;
             dropdown.show();
         } else {
             dropdown.hide();
-            target.classList.add("disabled");
+            disabled = true;
         }
 
         suggestionsItems = items;
@@ -90,7 +89,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         (createDropdown: (element: HTMLElement) => Dropdown) =>
         (element: HTMLElement): any => {
             dropdown = createDropdown(element);
-            target = element;
 
             const api = {
                 hide: dropdown.hide,
@@ -131,7 +129,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <WithDropdown {drop} toggleOpen={false} let:createDropdown>
-    <slot createAutocomplete={createAutocomplete(createDropdown)} />
+    <slot createAutocomplete={createAutocomplete(createDropdown)} {disabled} />
 
     <DropdownMenu class={className}>
         {#each suggestionsItems as suggestion, index}