Dynamic Items in ComboBox does not rerender when changed #800

shirecoding · 2024-02-23T09:10:47Z

shirecoding
Feb 23, 2024

i have the reactive variable addressOptions which changes because of a backend triggered search on addresses, i cant seem to get the Command.Group to rerender though. It only appears if i click outside and click on it again after search, but it doesnt seem to be refreshing as the variable changes

<Popover.Root bind:open let:ids>
    <Popover.Trigger asChild let:builder>
        <Button
            builders={[builder]}
            variant="outline"
            role="combobox"
            aria-expanded={open}
            class="w-[300px] justify-between overflow-hidden"
        >
            {address || "Search Address..."}
        </Button>
    </Popover.Trigger>
    <Popover.Content class="w-[300px] p-0">
        <Command.Root onKeydown={searchAddress}>
            <Command.Input placeholder="Search Address..." autocomplete="off" />
            <Command.Group>
                {#each addressOptions as option (option.value)}
                    <Command.Item
                        value={option.value}
                        onSelect={() => {
                            onSelectAddress(option.meta);
                            closeAndFocusTrigger(ids.trigger);
                        }}
                    >
                        {option.label}
                    </Command.Item>
                {/each}
            </Command.Group>
        </Command.Root>
    </Popover.Content>
</Popover.Root>