Set disabled class on TagInput from WithAutocomplete

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>

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}

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) {
+    .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>

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"

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
+            disabled = false;
-            target.classList.remove("disabled");
             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}