SolidJS•12mo ago

Using kobalte ui combobox with asynchronous options

Hi all! I'm new to kobalte and solid in general, so I would appreciate some help here! I'm using solid-ui, which uses kobalte for the Combobox component. I noticed, though, that giving the ComboBox.Root component's options field the result of an asynchronous operation (im using createResource) somewhat breaks the component visually. Here's a snippet of my code to show you what I mean:

export const NetworkInterfaceSelector: Component<NetworkInterfaceSelectorProps> = (props) => {
    const [networkInterfaces] = createResource(get_network_interfaces, { initialValue: [] });
    const [targetNetworkInterface, setTargetNetworkInterface] = createSignal<NetworkInterface | undefined>(undefined);

    return (
        <Combobox<NetworkInterface>
            placeholder="Select a network interface"
            options={networkInterfaces()}
            class={props.class}
            onInputChange={(value) => {if (value === "") setTargetNetworkInterface(undefined)}}
            itemComponent={(props) => (
                <ComboboxItem item={props.item}>
                    <ComboboxItemLabel>{props.item.rawValue.description}</ComboboxItemLabel>
                    <ComboboxItemIndicator />
                </ComboboxItem>
            )}
        >
        ...

export const NetworkInterfaceSelector: Component<NetworkInterfaceSelectorProps> = (props) => {
    const [networkInterfaces] = createResource(get_network_interfaces, { initialValue: [] });
    const [targetNetworkInterface, setTargetNetworkInterface] = createSignal<NetworkInterface | undefined>(undefined);

    return (
        <Combobox<NetworkInterface>
            placeholder="Select a network interface"
            options={networkInterfaces()}
            class={props.class}
            onInputChange={(value) => {if (value === "") setTargetNetworkInterface(undefined)}}
            itemComponent={(props) => (
                <ComboboxItem item={props.item}>
                    <ComboboxItemLabel>{props.item.rawValue.description}</ComboboxItemLabel>
                    <ComboboxItemIndicator />
                </ComboboxItem>
            )}
        >
        ...

The example is ripped pretty much straight from the docs, besides the createResource part. I had to add the initialValue option because otherwise, I would get an error that options can't be set to NetworkInterface[] | undefined and would give me an error about reading .filter from undefined. Anyways, after the options become populated, all of the items are treated as the same, so hovering on one will highlight them all, selecting one will apply the selected icon to all, etc. Also, selecting and typing is broken. So, I was wondering if there is another way to show the combobox with async options. I've tried using Suspense and Show, and they didn't work, but I could be using them wrong. Thanks!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Using kobalte ui combobox with asynchronous options