declspecl Posts - Answer Overflow

declspecl

Explore posts from servers

•Created by declspecl on 1/2/2024 in #support

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!

1 replies

SSolidJS

•Created by declspecl on 12/31/2023 in #support

Question about async effects and their underlying reactivity

Hello! I'm learning solid, coming from a react background, and had a question about something mentioned on the docs. One of the considerations listed is that

"This approach only tracks synchronously. If you have a setTimeout or use an async function in your Effect the code that executes async after the fact won't be tracked."

I was wondering why this is the case behind the scenes? Just because its a setTimeout or async function in the effect, it still is calling the primitives that manages all of the reactivity, so why wouldnt the code that runs async follow the same typical reactive behavior / wouldn’t be tracked? Thanks!

1 replies

Gaming

Programming