Keyboard interaction doesn't work between Combobox items when triggering focus

Author: mu-hun

src/docs/03-combobox.md

@@ -86,13 +86,12 @@ Comboboxes are the foundation of accessible autocompletes and command palettes f
 				>
 					{#each filtered as value}
 						{@const active = $combobox.active === value}
-						{@const selected = $combobox.selected === value}
 						<li
-							class="relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 focus:outline-none focus:bg-teal-600 focus:text-white group"
+							class="relative cursor-default select-none py-2 pl-10 pr-4 focus:outline-none font-normal aria-selected:font-medium {active ? 'bg-teal-600 text-white' : 'text-gray-900'} group"
 							use:combobox.item={{ value }}
 						>
-							<span class="block truncate font-normal group-aria-selected:font-medium">{value.name}</span>
-							<span class="absolute invisible group-aria-selected:visible inset-y-0 left-0 flex items-center pl-3 text-teal-600 group-focus:text-white">
+							<span class="block truncate">{value.name}</span>
+							<span class="absolute invisible group-aria-selected:visible inset-y-0 left-0 flex items-center pl-3 {active ? 'text-white' : 'text-teal-600'}">
 								<Check class="h-5 w-5" />
 							</span>
 						</li>

src/docs/04-combobox-multi.md

@@ -100,12 +100,13 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se
 				class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
 			>
 				{#each filtered as value}
+					{@const active = $combobox.active === value}
 					<li
-						class="relative cursor-default select-none py-2 pl-4 pr-9 focus:outline-none text-gray-900 focus:bg-teal-600 focus:text-white group"
+						class="relative cursor-default select-none py-2 pl-4 pr-9 focus:outline-none font-normal aria-selected:font-medium {active ? 'bg-teal-600 text-white' : 'text-gray-900'} group"
 						use:combobox.item={{ value }}
 					>
-						<span class="block truncate font-normal group-focus:font-semibold">{value.name}</span>
-						<span class="absolute invisible group-aria-selected:visible inset-y-0 right-0 flex items-center pr-3 text-teal-600 group-hover:text-white">
+						<span class="block truncate">{value.name}</span>
+						<span class="absolute invisible group-aria-selected:visible inset-y-0 right-0 flex items-center pr-3 {active ? 'text-white' : 'text-teal-600'}">
 							<Check class="h-5 w-5" />
 						</span>
 					</li>

src/lib/combobox.ts

@@ -74,7 +74,7 @@ export function createCombobox(init?: Partial<Combobox>) {
       set({ expanded, opened, active })
       const item = state.items[active]
       if (item) {
-        item.node.focus();
+        item.node.scrollIntoView({ block: 'nearest' })
       }
     }
   }

src/routes/example/combobox/+page.svelte

@@ -54,12 +54,13 @@
 				class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
 			>
 				{#each filtered as value}
+					{@const active = $combobox.active === value}
 					<li
-						class="relative cursor-default select-none py-2 pl-10 pr-4 font-normal aria-selected:font-medium text-gray-900 focus:outline-none focus:bg-teal-600 focus:text-white group"
+						class="relative cursor-default select-none py-2 pl-10 pr-4 focus:outline-none font-normal aria-selected:font-medium {active ? 'bg-teal-600 text-white' : 'text-gray-900'} group"
 						use:combobox.item={{ value }}
 					>
 						<span class="block truncate">{value.name}</span>
-						<span class="absolute invisible group-aria-selected:visible inset-y-0 left-0 flex items-center pl-3 text-teal-600 group-focus:text-white">
+						<span class="absolute invisible group-aria-selected:visible inset-y-0 left-0 flex items-center pl-3 {active ? 'text-white' : 'text-teal-600'}">
 							<Check class="h-5 w-5" />
 						</span>
 					</li>

src/routes/example/combobox/multi/+page.svelte

@@ -70,12 +70,13 @@
 				class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
 			>
 				{#each filtered as value}
+					{@const active = $combobox.active === value}
 					<li
-						class="relative cursor-default select-none py-2 pl-4 pr-9 focus:outline-none font-normal aria-selected:font-medium text-gray-900 focus:bg-teal-600 focus:text-white group"
+						class="relative cursor-default select-none py-2 pl-4 pr-9 focus:outline-none font-normal aria-selected:font-medium {active ? 'bg-teal-600 text-white' : 'text-gray-900'} group"
 						use:combobox.item={{ value }}
 					>
 						<span class="block truncate">{value.name}</span>
-						<span class="absolute invisible group-aria-selected:visible inset-y-0 right-0 flex items-center pr-3 text-teal-600 group-hover:text-white">
+						<span class="absolute invisible group-aria-selected:visible inset-y-0 right-0 flex items-center pr-3 {active ? 'text-white' : 'text-teal-600'}">
 							<Check class="h-5 w-5" />
 						</span>
 					</li>