Fix Dropdowns

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));
 

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()))
+    $: filteredItems = items.filter(item => item.name.toLowerCase().includes(searchValue.toLowerCase())).filter((value, index) => index < 5)
-    $: openDropdown = filteredItems.length > 0 && searchValue.length >= 3 && focus || all && focus
+    $: 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}/>
+<Button color="alternative" on:click={() => open = true}>{selected === null ? 'Auswählen' : items.find(value => value.value === selected)?.name}</Button>
-{#if (openDropdown)}
+<Dropdown bind:open class="w-60">
-    <Dropdown open class="z-10 py-1 w-44">
+    <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}
-            <DropdownItem on:click={() => selectItem(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}
-            </DropdownItem>
+        </button>
     {/each}
-    </Dropdown>
+</Dropdown>
-    <div class="z-10"></div>
-{/if}