Combobox / Command not showing Command.Items correctly when source data changes

[baronyoung]

Describe the bug

Using the demo code for Combobox, if you change the values contained within the 'frameworks' array (by doing a fetch after typing some characters for example), the Command.Items will not display correctly. Oddly, you can see it make space for them but the text won't display even if I try changing the text colors. My actual use case is a stock search which waits for at least one letter to be typed before searching for a list of stock symbols starting with that letter. I can't get anything to display unless the data in the #each block is present when the component mounts.

Reproduction

I tried the above repo link but it builds a Svelte 4 site, which won't work. This should be very easy to replicate, just add a setInterval to add a frameworks object every 5 secs or something.

Logs

No response

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 45.27 GB / 62.58 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm
    bun: 1.1.21 - ~/.bun/bin/bun
  Managers:
    Apt: 2.7.14 - /usr/bin/apt
    Cargo: 1.80.1 - ~/.cargo/bin/cargo
    pip3: 24.0 - /usr/bin/pip3
  Utilities:
    CMake: 3.28.3 - /usr/bin/cmake
    Make: 4.3 - /usr/bin/make
    GCC: 13.3.0 - /usr/bin/gcc
    Git: 2.43.0 - /usr/bin/git
    Curl: 8.5.0 - /usr/bin/curl
    OpenSSL: 3.0.13 - /usr/bin/openssl
  Virtualization:
    Docker: 27.3.1 - /usr/local/bin/docker
  IDEs:
    Nano: 7.2 - /usr/bin/nano
  Languages:
    Bash: 5.2.21 - /usr/bin/bash
    Go: 1.22.2 - /usr/bin/go
    Perl: 5.38.2 - /usr/bin/perl
    Python3: 3.12.3 - /usr/bin/python3
    Rust: 1.80.1 - /home/baron/.cargo/bin/rustc
  Browsers:
    Chrome: 130.0.6723.116

Severity

annoyance

[ieedan]

A reproduction would help I am not able to reproduce this with the information you provided.

Here is what I am trying to work off of but everything works fine.

<script lang="ts">
	import Check from 'lucide-svelte/icons/check';
	import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
	import { tick } from 'svelte';
	import * as Command from '$lib/components/ui/command/index.js';
	import * as Popover from '$lib/components/ui/popover/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import { cn } from '$lib/utils.js';

	const frameworks = [
		{
			value: 'sveltekit',
			label: 'SvelteKit'
		},
		{
			value: 'next.js',
			label: 'Next.js'
		},
		{
			value: 'nuxt.js',
			label: 'Nuxt.js'
		},
		{
			value: 'remix',
			label: 'Remix'
		},
		{
			value: 'astro',
			label: 'Astro'
		}
	];

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

	const selectedValue = $derived(frameworks.find((f) => f.value === value)?.label);

	// We want to refocus the trigger button when the user selects
	// an item from the list so users can continue navigating the
	// rest of the form with the keyboard.
	function closeAndFocusTrigger() {
		open = false;
		tick().then(() => {
			triggerRef.focus();
		});
	}

	const newItem = () => {
		frameworks.push({ label: 'SolidJs', value: 'solid.js' });
	};
</script>

<main class="flex h-svh flex-col place-items-center justify-center gap-4">
	<Popover.Root bind:open>
		<Popover.Trigger bind:ref={triggerRef}>
			{#snippet child({ props })}
				<Button
					variant="outline"
					class="w-[200px] justify-between"
					{...props}
					role="combobox"
					aria-expanded={open}
				>
					{selectedValue || 'Select a framework...'}
					<ChevronsUpDown class="opacity-50" />
				</Button>
			{/snippet}
		</Popover.Trigger>
		<Popover.Content class="w-[200px] p-0">
			<Command.Root>
				<Command.Input placeholder="Search framework..." />
				<Command.List>
					<Command.Empty>No framework found.</Command.Empty>
					<Command.Group>
						{#each frameworks as framework}
							<Command.Item
								value={framework.value}
								onSelect={() => {
									value = framework.value;
									closeAndFocusTrigger();
								}}
							>
								<Check class={cn(value !== framework.value && 'text-transparent')} />
								{framework.label}
							</Command.Item>
						{/each}
					</Command.Group>
				</Command.List>
			</Command.Root>
		</Popover.Content>
	</Popover.Root>

	<Button onclick={newItem}>Change items</Button>
</main>