From 0b57374afbaa5bea5dd002c2e0034a3390b4a776 Mon Sep 17 00:00:00 2001
From: Jo Burgard <mail@joburgard.com>
Date: Wed, 3 Jan 2024 07:15:23 +0100
Subject: [PATCH] Combobox: change styles and make list scrollable

---
 src/lib/ui/combobox/Combobox.svelte    | 34 +++++++++++++++++---------
 src/lib/ui/input/index.ts              |  2 +-
 src/stories/ui/Combobox.stories.svelte |  2 ++
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/lib/ui/combobox/Combobox.svelte b/src/lib/ui/combobox/Combobox.svelte
index 75fe421..f6c8519 100644
--- a/src/lib/ui/combobox/Combobox.svelte
+++ b/src/lib/ui/combobox/Combobox.svelte
@@ -62,6 +62,10 @@ SPDX-License-Identifier: Unlicense
 		helpers: { isSelected },
 	} = createCombobox<T>({
 		forceVisible: true,
+		positioning: {
+			placement: 'bottom-start',
+			sameWidth: false,
+		},
 	});
 
 	selected.subscribe((newValue) => (value = newValue));
@@ -79,13 +83,14 @@ SPDX-License-Identifier: Unlicense
 			: showAllResult;
 </script>
 
+<!-- TODO Ability to clear field -->
 <div class="isolate">
 	<label class="relative block" use:melt={$label}>
 		<input
 			use:melt={$input}
 			class={inputVariants({
 				size,
-				class: ['placeholder-transparent w-full', className],
+				class: ['placeholder-transparent w-full pr-7.5', className],
 			})}
 			on:blur
 			on:change
@@ -107,19 +112,26 @@ SPDX-License-Identifier: Unlicense
 	</label>
 	{#if $open}
 		<ul
-			class="p-2 border rounded-[--roundedness-base] shadow-lg"
+			class="p-2 border min-h-0 max-h-[500px] rounded-[--roundedness-base] shadow-lg overflow-y-auto"
 			use:melt={$menu}
 			transition:fly={{ duration: 150, y: -5 }}
 		>
-			{#each filteredOptions || [] as resultIndex, index (index)}
-				{@const optionData = toOption(data[resultIndex])}
-				<li
-					class="px-3 py-1.5 scroll-my-2 cursor-pointer rounded-[--roundedness-sm] hover:(bg-gray-100) data-[highlighted]:bg-gray-200"
-					use:melt={$option(optionData)}
-				>
-					<div>{optionData.label}</div>
-				</li>
-			{/each}
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<div class="flex min-h-0 flex-col gap-0 overflow-y-scroll" tabindex="0">
+				{#each filteredOptions || [] as resultIndex, index (index)}
+					{@const optionData = toOption(data[resultIndex])}
+					<li
+						class="px-3 py-1.5 scroll-my-2 cursor-pointer rounded-[--roundedness-sm] hover:(bg-gray-100) data-[highlighted]:bg-gray-200 select-none"
+						use:melt={$option(optionData)}
+					>
+						<div class="break-words">{optionData.label}</div>
+					</li>
+				{:else}
+					<li class="px-3 py-1.5 rounded-[--roundedness-sm] select-none">
+						No matching entry found.
+					</li>
+				{/each}
+			</div>
 		</ul>
 	{/if}
 </div>
diff --git a/src/lib/ui/input/index.ts b/src/lib/ui/input/index.ts
index c1f3b03..31e2dcd 100644
--- a/src/lib/ui/input/index.ts
+++ b/src/lib/ui/input/index.ts
@@ -33,7 +33,7 @@ const inputVariants = tv({
 // [input[aria-expanded=true]_~_&] works
 const inputPlaceholderVariants = tv({
 	base: `
-		absolute top-1/2 -translate-y-1/2 text-gray-400
+		absolute top-1/2 -translate-y-1/2 text-gray-400 select-none
 		transition-duration-100 transition-ease-out transition-property-[top,font-size,line-height]
 		[input:not(:placeholder-shown)~&,input:focus~&,input[aria-expanded=true]_~_&]:(text-[--color-primary] bg-white px-1 -ml-1 rounded text-xs/3 top-0)
 	`,
diff --git a/src/stories/ui/Combobox.stories.svelte b/src/stories/ui/Combobox.stories.svelte
index 904e47b..e1d0a39 100644
--- a/src/stories/ui/Combobox.stories.svelte
+++ b/src/stories/ui/Combobox.stories.svelte
@@ -28,6 +28,8 @@ SPDX-License-Identifier: Unlicense
 				{ label: 'Dull' },
 				{ label: 'Deafening' },
 				{ label: 'Destitute' },
+				{ label: 'emptySpaces' },
+				{ label: 'empty Spaces' },
 				{ label: 'Stingy' },
 				{ label: 'Spotless' },
 				{ label: 'Furious' },