Combobox, reactivity and automatic item selections

[silktrader]

I am having a issue with the ComboBox component: although the Command.Items are properly rendered and populated from my API fetches, the first item in the list gets automatically selected on navigating with the keyboard, or mouse.

I am triggering updates to my source array from "onStateChange" (and caching results in my service).
Please, note that "shouldFilter" is set to "false".
These is the content of "state.filtered.items", after one fetch:

0:{"----bits-3" => 0.99}
1:{"----bits-4" => 0}
2:{"9bfff3b5-5b43-412c-9c3b-98cded896dc9" => 0}
3:{"e187e427-985e-4dc0-aaa5-b98f4553ac5c" => 0}
4:{"----bits-7" => 0.99}
5:{"----bits-8" => 0}
6:{"----bits-11" => 0.99}
7:{"----bits-12" => 0}
8:{"----bits-15" => 0.99}
etc

Only entry 2 and 3 are present in my reactive array.

Do you have any idea why "state.value" resets to the first item, after navigating with the keyboard (or mouse) to the successive ones, and why the first item becomes automatically highlighted and selected?

If I click explicitly on the item, the "selectedValue" is set as desired.

This is my +page.svelte:

<script lang="ts">

	let open = $state(false);
	let selectedFoodId = $state('');
	let triggerRef = $state<HTMLButtonElement>(null!);

	let foodHints: { label: string; value: string }[] = $state.raw([]);
	const selectedValue = $derived(foodHints.find((f) => f.value === selectedFoodId)?.label);

	function closeAndFocusTrigger() {
		open = false;
		tick().then(() => {
			triggerRef.focus();
		});
	}

	async function getHints(searchTerm: string): Promise<void> {
		if (searchTerm.length < 3) {
			foodHints = [];
			return;
		}

		foodHints = (await foodService.getFoodNames(searchTerm)) as Array<{
			value: string;
			label: string;
		}>;
	}

	let debounceTimeout: ReturnType<typeof setTimeout>;
	function handleStateChange(state: Readonly<CommandState>) {
		// Clear any previous debounce timeout
		clearTimeout(debounceTimeout);

		// Set a new timeout
		debounceTimeout = setTimeout(async () => {
			console.log(state.filtered.items);
			await getHints(state.search);
		}, 600);
	}
</script>

<Popover.Root bind:open>
	<Popover.Trigger bind:ref={triggerRef}>
		{#snippet child({ props })}
			<Button
				{...props}
				variant="outline"
				class="w-[200px] justify-between"
				role="combobox"
				aria-expanded={open}
			>
				{selectedValue || 'Select a food...'}
				<ChevronsUpDownIcon class="opacity-50" />
			</Button>
		{/snippet}
	</Popover.Trigger>
	<Popover.Content class="w-[200px] p-0">
		<!--		Must add shouldFilter to fix reactivity issues as per https://github.com/huntabyte/shadcn-svelte/discussions/800-->
		<Command.Root
			onStateChange={handleStateChange}
			shouldFilter={false}
			disablePointerSelection={true}
			disableInitialScroll={true}
			loop={false}
		>
			<Command.Input autocomplete="off" placeholder="Type a food's name" class="h-9" />
			<Command.List>
				<Command.Empty>No food found.</Command.Empty>
				<Command.Group>
					{#each foodHints as hint (hint.value)}
						<Command.Item
							value={hint.value}
							onSelect={() => {
								selectedFoodId = hint.value;
								closeAndFocusTrigger();
							}}
						>
							<CheckIcon
								class={cn(hint.value !== selectedFoodId && 'text-transparent')}
							/>
							{hint.label}
						</Command.Item>
					{/each}
				</Command.Group>
			</Command.List>
		</Command.Root>
	</Popover.Content>
</Popover.Root>

[silktrader]

For the record, I seem to be able to get the desired result by ignoring onStateChange and watching for changes on the input:

<Command.Input bind:value={commandInputValue} autocomplete="off" placeholder="Type a food's name" class="h-9" />

	let commandInputValue = $state('');
	$effect( () => {
		// Clear any previous debounce timeout
		clearTimeout(debounceTimeout);

		// Set a new timeout
		debounceTimeout = setTimeout(async () => {
			await getHints(commandInputValue);
		}, 600);
		console.log(commandInputValue);
	});

... but I still don't understand what failed in the first code excerpt.
What's the best way to listen to Command.List changes, while populating entries dynamically, as with a Fetch request?