Explorar o código

feat: focus search input by default

Timothy J. Baek hai 1 ano
pai
achega
cb364f0ac7
Modificáronse 1 ficheiros con 4 adicións e 2 borrados
  1. 4 2
      src/lib/components/chat/ModelSelector/Selector.svelte

+ 4 - 2
src/lib/components/chat/ModelSelector/Selector.svelte

@@ -2,7 +2,7 @@
 	import { Select } from 'bits-ui';
 	import { Select } from 'bits-ui';
 
 
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { flyAndScale } from '$lib/utils/transitions';
-	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
 
 
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
@@ -177,8 +177,9 @@
 
 
 <Select.Root
 <Select.Root
 	{items}
 	{items}
-	onOpenChange={() => {
+	onOpenChange={async () => {
 		searchValue = '';
 		searchValue = '';
+		window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
 	}}
 	}}
 	selected={items.find((item) => item.value === value)}
 	selected={items.find((item) => item.value === value)}
 	onSelectedChange={(selectedItem) => {
 	onSelectedChange={(selectedItem) => {
@@ -203,6 +204,7 @@
 					<Search className="size-4" strokeWidth="2.5" />
 					<Search className="size-4" strokeWidth="2.5" />
 
 
 					<input
 					<input
+						id="model-search-input"
 						bind:value={searchValue}
 						bind:value={searchValue}
 						class="w-full text-sm bg-transparent outline-none"
 						class="w-full text-sm bg-transparent outline-none"
 						placeholder={searchPlaceholder}
 						placeholder={searchPlaceholder}