SolidJSS
SolidJS•2y ago
declspecl

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>
            )}
        >
        ...
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!
Was this page helpful?