From 5ba5a642e476ec99a374c030167716e3dd0dae9e Mon Sep 17 00:00:00 2001
From: Chaoscaot <chaoscaot@zohomail.eu>
Date: Tue, 25 Jul 2023 17:06:28 +0200
Subject: [PATCH] Fix Dropdowns

---
 src/components/FightEditPart.svelte   |  2 +-
 src/components/TypeAheadSearch.svelte | 35 +++++++++++++--------------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/FightEditPart.svelte b/src/components/FightEditPart.svelte
index c9f71b9..85ae704 100644
--- a/src/components/FightEditPart.svelte
+++ b/src/components/FightEditPart.svelte
@@ -17,7 +17,7 @@
     $: selectPlayers = $players.map(player => {
         return {
             name: player.name,
-            value: player.id
+            value: player.id.toString()
         }
     }).sort((a, b) => a.name.localeCompare(b.name));
 
diff --git a/src/components/TypeAheadSearch.svelte b/src/components/TypeAheadSearch.svelte
index 2ba838c..ac171dc 100644
--- a/src/components/TypeAheadSearch.svelte
+++ b/src/components/TypeAheadSearch.svelte
@@ -1,31 +1,30 @@
 <script lang="ts">
-    import {Dropdown, DropdownItem, Search} from 'flowbite-svelte'
+    import {Button, Dropdown, DropdownItem, Search} from 'flowbite-svelte'
 
     export let selected: string = ''
     export let items: {name: string, value: string}[] = []
-    export let all = false
 
     export let searchValue = items.find(item => item.value === selected)?.name || ''
-    let focus = false
+    let open = false
 
-    $: filteredItems = items.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase()))
-    $: openDropdown = filteredItems.length > 0 && searchValue.length >= 3 && focus || all && focus
+    $: filteredItems = items.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase())).filter((value, index) => index < 5)
+    $: console.log(selected)
 
-    function selectItem(item) {
+    function selectItem(item: {name: string, value: string}) {
         selected = item.value
         searchValue = item.name
-        focus = false
+        open = false
     }
 </script>
 
-<Search bind:value={searchValue} on:focus={() => focus = true} on:keydown={() => focus = true}/>
-{#if (openDropdown)}
-    <Dropdown open class="z-10 py-1 w-44">
-        {#each filteredItems as item}
-            <DropdownItem on:click={() => selectItem(item)}>
-                {item.name}
-            </DropdownItem>
-        {/each}
-    </Dropdown>
-    <div class="z-10"></div>
-{/if}
+<Button color="alternative" on:click={() => open = true}>{selected === null ? 'Auswählen' : items.find(value => value.value === selected)?.name}</Button>
+<Dropdown bind:open class="w-60">
+    <div class="overflow-y-auto p-3 text-sm" slot="header">
+        <Search bind:value={searchValue} on:focus={() => open = true} on:keydown={() => open = true}/>
+    </div>
+    {#each filteredItems as item}
+        <button on:click={() => selectItem(item)} class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full cursor-pointer border-b border-b-gray-600">
+            {item.name}
+        </button>
+    {/each}
+</Dropdown>