feat: focus when opening dropdown

src/lib/components/functional/FormatDropdown.svelte

@@ -216,6 +216,23 @@
 		}
 	};
 
+	const clickDropdown = () => {
+		open = !open;
+		if (open) {
+			setTimeout(() => {
+				if (dropdownMenu) {
+					const searchInput = dropdownMenu.querySelector(
+						"#format-search",
+					) as HTMLInputElement;
+					if (searchInput) {
+						searchInput.focus();
+						searchInput.select();
+					}
+				}
+			}, 0); // let dropdown open first
+		}
+	};
+
 	onMount(() => {
 		const handleClickOutside = (e: MouseEvent) => {
 			if (dropdown && !dropdown.contains(e.target as Node)) {
@@ -248,10 +265,9 @@
 	bind:this={dropdown}
 >
 	<button
-		class="font-display w-full justify-center overflow-hidden relative cursor-pointer px-3 py-3.5 bg-button {disabled
+		class="relative flex items-center justify-center w-full font-display  px-3 py-3.5 bg-button rounded-full overflow-hidden cursor-pointer focus:!outline-none
-			? 'opacity-50 cursor-auto'
+		{disabled ? 'opacity-50 cursor-auto' : 'cursor-pointer'}"
-			: 'cursor-pointer'} flex items-center rounded-full focus:!outline-none"
+		onclick={() => clickDropdown()}
-		onclick={() => (open = !open)}
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
 		{disabled}
@@ -311,6 +327,8 @@
 						bind:value={searchQuery}
 						oninput={handleSearch}
 						onfocus={() => {}}
+						id="format-search"
+						autocomplete="off"
 					/>
 					<span
 						class="absolute left-4 top-1/2 -translate-y-1/2 flex items-center"