Fetch support

[aguilera51284]

thx for this amazing lib :)

[martinpengellyphillips]

You're welcome 😀

Can you explain more what you mean by "fetch support" - what does it look like in practice for you?

[aguilera51284]

thanks for your reply, this is what i mean the possibility of popularizing the selections with resources from outside

[martinpengellyphillips]

It is possible today. Here is an example:

import { createResource, createSignal } from "solid-js";
import { Select } from "@thisbeyond/solid-select";

const fetchData = async (inputValue) =>
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(
        ["apple", "banana", "pear", "pineapple", "kiwi"].filter((option) =>
          option.startsWith(inputValue)
        )
      );
    }, 800);
  });

export const AsyncFetchExample = () => {
  const [inputValue, setInputValue] = createSignal("");
  const [options] = createResource(inputValue, fetchData, { initialValue: "" });
  const loadingOption = "Loading...";

  return (
    <Select
      readonly={false}
      onInput={setInputValue}
      options={options.loading ? [loadingOption] : options()}
      isOptionDisabled={(option) => option === loadingOption}
    />
  );
};

That said, this could be made nicer by supporting async functions and a 'loading' message directly in the component itself. I'll have a think about that. Ideal might be:

<Select options={fetchData} loadingPlaceholder='Loading...' />

[martinpengellyphillips]

This is now simpler with release 0.8.0 and the createAsyncOptions helper.

import { Select, createAsyncOptions } from "@thisbeyond/solid-select";

const fetchData = async (inputValue) => {
  return await new Promise((resolve) => {
    setTimeout(
      () =>
        resolve(
          ["apple", "banana", "pear", "pineapple", "kiwi"].filter((option) =>
            option.startsWith(inputValue)
          )
        ),
      500
    );
  });
};

export const AsyncFetchExample = () => {
  const props = createAsyncOptions(fetchData);
  return <Select {...props} />;
};

[clementmas]

I was looking for a way to debounce HTTP requests. Here's the code I'm using for future reference:

import { createAsyncOptions, Select } from '@thisbeyond/solid-select';
import { debounce } from '@solid-primitives/scheduled';

export default function () {
    const props = createAsyncOptions(fetchData);

    return <Select {...props} onInput={debounce(props.onInput, 300)} />;
}

Let me know if there's a better way to do it. Would be nice to have more examples of common use cases in the documentation.

Edit: looking quickly, I actually hadn't noticed that the "Select examples" on the website was displaying more examples than just the select itself.

[Tanner-Scadden]

This is also something else that I'm interested in!