From 201773e7c6388f73f851938d2770f5de6f6e4321 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 1 Jul 2021 21:21:19 +0200
Subject: [PATCH] Fix autocomplete dropdown

+ find a different solution for making tags and tag inputs same size
---
 ts/editor/Tag.svelte       |  1 +
 ts/editor/TagEditor.svelte | 39 ++++++++++--------
 ts/editor/TagInput.svelte  | 81 ++++++++++++++++----------------------
 3 files changed, 58 insertions(+), 63 deletions(-)

diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index d220310b7..53008cc57 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -133,6 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         $with-disabled: false,
         $with-hover: false
     );
+
     @include button.btn-night(
         $with-active: false,
         $with-disabled: false,
diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte
index 9d477421a..adb5557d2 100644
--- a/ts/editor/TagEditor.svelte
+++ b/ts/editor/TagEditor.svelte
@@ -374,7 +374,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         </div>
 
         {#each tags as tag, index (tag.id)}
-            <div class="pb-1">
+            <div class="position-relative pb-1" class:hide-tag={index === active}>
+                <Tag
+                    name={tag.name}
+                    bind:flash={tag.flash}
+                    bind:selected={tag.selected}
+                    on:tagedit={() => {
+                        active = index;
+                        deselect();
+                    }}
+                    on:tagselect={() => select(index)}
+                    on:tagrange={() => selectRange(index)}
+                    on:tagdelete={() => {
+                        deleteTagAt(index);
+                        saveTags();
+                    }}
+                />
+
                 {#if index === active}
                     <WithAutocomplete
                         class="d-flex flex-column-reverse dropup"
@@ -387,6 +403,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     >
                         <TagInput
                             id={tag.id}
+                            class="position-absolute top-0 start-0"
                             bind:name={activeName}
                             bind:input={activeInput}
                             on:focus={() => {
@@ -414,22 +431,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             }}
                         />
                     </WithAutocomplete>
-                {:else}
-                    <Tag
-                        name={tag.name}
-                        bind:flash={tag.flash}
-                        bind:selected={tag.selected}
-                        on:tagedit={() => {
-                            active = index;
-                            deselect();
-                        }}
-                        on:tagselect={() => select(index)}
-                        on:tagrange={() => selectRange(index)}
-                        on:tagdelete={() => {
-                            deleteTagAt(index);
-                            saveTags();
-                        }}
-                    />
                 {/if}
             </div>
         {/each}
@@ -445,4 +446,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .tag-spacer {
         cursor: text;
     }
+
+    .hide-tag :global(.tag) {
+        opacity: 0;
+    }
 </style>
diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte
index afc3e096a..9c6344126 100644
--- a/ts/editor/TagInput.svelte
+++ b/ts/editor/TagInput.svelte
@@ -3,10 +3,13 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { onMount, onDestroy, createEventDispatcher, tick } from "svelte";
+    import { onMount, createEventDispatcher, tick } from "svelte";
     import { normalizeTagname } from "./tags";
 
     export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+
     export let name: string;
     export let input: HTMLInputElement;
 
@@ -170,54 +173,40 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => input.focus());
 </script>
 
-<label class="ps-2 pe-1" data-value={name}>
-    <input
-        {id}
-        bind:this={input}
-        bind:value={name}
-        type="text"
-        tabindex="-1"
-        size="1"
-        on:focus
-        on:blur={onBlur}
-        on:keydown={onKeydown}
-        on:keydown
-        on:keyup
-        on:input
-        on:paste={onPaste}
-    />
-</label>
+<input
+    {id}
+    class={className}
+    bind:this={input}
+    bind:value={name}
+    type="text"
+    tabindex="-1"
+    size="1"
+    on:focus
+    on:blur={onBlur}
+    on:keydown={onKeydown}
+    on:keydown
+    on:keyup
+    on:input
+    on:paste={onPaste}
+/>
 
 <style lang="scss">
-    label {
-        display: inline-grid;
+    input {
+        padding-left: 9.5px;
+        padding-bottom: 5.5px;
+
+        width: 100%;
         height: 100%;
 
-        &::after,
-        input {
-            color: var(--text-fg);
-            background: none;
-            resize: none;
-            appearance: none;
-            width: auto;
-            grid-area: 1 / 1;
-            font: inherit;
-            /* TODO we need something like --base-font-size for buttons' 13px */
-            font-size: 13px;
-            outline: none;
-            border: none;
-            margin: 0;
-            /* adjust so deleting all tags does not cause a reflow */
-            padding: 3.2px 0;
-        }
-
-        &::after {
-            /* 7 spaces to minimize reflow on clicking tag */
-            content: attr(data-value) "       ";
-            visibility: hidden;
-            white-space: pre-wrap;
-            position: relative;
-            top: -2rem;
-        }
+        color: var(--text-fg);
+        background: none;
+        resize: none;
+        appearance: none;
+        font: inherit;
+        /* TODO we need something like --base-font-size for buttons' 13px */
+        font-size: 13px;
+        outline: none;
+        border: none;
+        margin: 0;
     }
 </style>