fix(Autocomplete): add max height to autocomplete options

N00nDay · Nov 22, 2023 · a5992d2 · a5992d2
1 parent 85578cb
commit a5992d2
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 11 deletions.
diff --git a/src/lib/components/autocomplete/Options.svelte b/src/lib/components/autocomplete/Options.svelte
@@ -53,7 +53,7 @@
 		defaultClass += ' h-full px-3 space-y-1';
 	} else {
 		defaultClass +=
-			' p-1 shadow-xl border border-border rounded-md origin-top-right absolute z-10 left-0 right-0 transition transform duration-150';
+			' p-1 shadow-xl border border-border rounded-md origin-top-right absolute z-10 left-0 right-0 max-h-[256px] overflow-y-auto';
 	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 

diff --git a/src/routes/autocomplete/+page.svelte b/src/routes/autocomplete/+page.svelte
@@ -28,16 +28,88 @@
 	let value6 = 'I am not in the options!';
 	let value7: string;
 
-	let options = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered7Options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
-
-	let filtered1 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered2 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered3 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered4 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered5 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered6 = ['Option 1', 'Option 2', 'Option 3'];
-	let filtered7 = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6'];
+	let options = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered7Options = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+
+	let filtered1 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered2 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered3 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered4 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered5 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered6 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
+	let filtered7 = [
+		'Option 1',
+		'Option 2',
+		'Option 3',
+		'Option 4',
+		'Option 5',
+		'Option 6',
+		'Option 7'
+	];
 
 	function filter1(e: Event) {
 		const target = e.target as HTMLInputElement;