Revert "fix: display of autocomplete choices"

This reverts commit bb77d18.
medialab · Jul 23, 2024 · 8643621 · 8643621
1 parent b8d57cf
commit 8643621
Showing 1 changed file with 14 additions and 28 deletions.
diff --git a/src/components/Autocomplete.svelte b/src/components/Autocomplete.svelte
@@ -75,7 +75,7 @@
   window.addEventListener("click", focusOut);
 </script>
 
-<div bind:this={componentElement} class="widget-container">
+<div bind:this={componentElement}>
   {#each selection as value (value)}
     <input type="hidden" {name} {value} />
   {/each}
@@ -90,22 +90,19 @@
     on:keydown={inputKeydown}
   />
   {#if focus}
-    <div class="choices-container">
-      <ul class="choices">
-        {#each searchResult as choice (choice.value)}
-          <li>
-            <button
-              on:click|stopPropagation|preventDefault={() =>
-                addSelection(choice)}
-              on:focusout={focusOut}
-              on:keydown={listKeydown}
-            >
-              {choice.label}
-            </button>
-          </li>
-        {/each}
-      </ul>
-    </div>
+    <ul class="choices">
+      {#each searchResult as choice (choice.value)}
+        <li>
+          <button
+            on:click|stopPropagation|preventDefault={() => addSelection(choice)}
+            on:focusout={focusOut}
+            on:keydown={listKeydown}
+          >
+            {choice.label}
+          </button>
+        </li>
+      {/each}
+    </ul>
   {/if}
   {#if selection.length > 0}
     <ul class="selection">
@@ -157,17 +154,7 @@
     }
   }
 
-  div.choices-container {
-    position: relative;
-    width: calc(100% - 50px);
-  }
-
   ul.choices {
-    position: absolute;
-    background-color: #fff;
-    z-index: 2;
-    right: 0;
-    left: 0;
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -179,7 +166,6 @@
   ul.choices li {
     padding: 0;
     cursor: pointer;
-    background-color: #fff;
   }
 
   ul.choices li:hover {