AsyncSelect

(inputText, pageNumber) => getCharacter({
      name: inputText,
      page: pageNumber + 1,
    }).then(data => {
      const { info, results, error } = data;

      if (error) {
        throw error;
      }

      return {
        options: results.map(opt => ({ id: opt.id, label: opt.name })),
        complete: !info.next,
      };
    })

[]

[]

(params) => setValue(params.valueKeys)

import * as React from "react";
import { AsyncSelect } from "spaceweb/asyncSelect";
import { getCharacter } from "rickmortyapi";
import { Button } from "spaceweb/button";
import ChevronDown from "spaceweb/icon/chevron-down";

export default () => {
  const [value, setValue] = React.useState([]);
  return (
    <AsyncSelect
      loadOptions={(inputText, pageNumber) =>
        getCharacter({
          name: inputText,
          page: pageNumber + 1
        }).then(data => {
          const { info, results, error } = data;
          if (error) {
            throw error;
          }
          return {
            options: results.map(opt => ({
              id: opt.id,
              label: opt.name
            })),
            complete: !info.next
          };
        })
      }
      searchingText="Searching characters..."
      minimumInput={0}
      paginationBuffer={50}
      debounceInterval={200}
      value={value}
      initialOptions={[]}
      type="select"
      intent="default"
      placeholder="Select character"
      onChange={params => setValue(params.valueKeys)}
    >
      {({ isOpen }) => (
        <Button
          endEnhancer={
            <ChevronDown
              size={10}
              $isOpen={isOpen}
              style={chevronStyles}
            />
          }
          variant="secondary"
        >
          {value[0]?.label || "Select Character"}
        </Button>
      )}
    </AsyncSelect>
  );
}

Use AsyncSelect component to load options from a remote source as the user types.

Options are fetched on the following triggers:

• When user enters some text in the input
• When user scrolls through the list of options in dropdown and all the pages of options haven't been fetched yet (pagination)
• On mount when fetchOnMount is true
• On focus (via keyboard or click) when fetchOnFocus is true

For more information, see the documentation of Select.

Note: By default, AsyncSelect looks for id and label properties in fetched options. To adapt to custom properties, use the labelKey and valueKey props to override the defaults.

Examples

Things to note:

• value prop is always an Array to provide a consistent interface - no matter if you use multi or single select.
• value prop is an Object[], wherein values corresponding to both - labelKey and valueKey are present. Since v11.4.0, you can also pass id[] as value to AsyncSelect. valueKeys will also be present in onChange function from now on.
• options returned by loadOptions prop is always an Object[]. Grouping of options is supported with GroupedAsyncSelect. Check next example.

Things to note:

• keys should be unique b/w group options

Things to note:

• Since exclude options is not supported yet, all groups will be collapsed and in disabled state when SelectAll is selected.
• Checked state of SelectAll option needs to be handled by consumer.
• Since, asyncSelect is not aware of all possible options, valueKeys and value will be an empty array for when onChange type is selectAll.

Things to note:

• If loadOnMount is true, options will be fetched on mount irrespective of the value of minimumInput.
• If loadOnFocus is true, options will be fetched on focus only if the number of characters entered by user is equal to or exceeds minimumInput value.

Use when you have some preselected values that don't need resolving (i.e. fetching of their corresponding options) by sending them as initialOptions.

Things to note:

• Options provided as initialOptions should always be a subset of all possible options that can returned from loadOptions
• initialOptions prop when present, is always an Object[]. Grouping of options is supported with GroupedAsyncSelect.
• Change in initialOptions on every render will not be honoured by AsyncSelect.

Things to note:

• value prop is an Object[], wherein values corresponding to both - labelKey and valueKey are present. Since v11.4.0, you can also pass id[] as value to AsyncSelect.
• resolveSelectedOptions prop will be invoked only once on first mount based on the presence of unresolved selected options with unresolved valueKeys.
• Use resolveValuesOnUpdate(introduced in 11.7.0) to calculate unresolved values and invoke resolveSelectedOptions on update as well.
• options returned by resolveSelectedOptions prop is always be an Object[]. Grouping of options is supported with GroupedAsyncSelect. Check next example.
• tombstone will be visible when initial selected options are being resolved.

Things to note:

• value prop is an { [groupId]: Array<Object|id> }. Object should have values corresponding to both - labelKey and valueKey.
• options returned by resolveSelectedOptions should be of shape { [groupId]: Array<Object|id> }.
• tombstone will be visible when initial selected options are being resolved.

useAsyncOptions hook

To use async select like functionality without rendering the select component, you can use useAsyncOptions hook. Which would return onPaginate, onInputChange and resultCountMap which can be used with CollapsibleSelectMenu or simple Menu to render options as per need. Check the following examples for further understanding.

API

AsyncSelect props

You can check the implementation of the component for more details.

AsyncSelect exports

You can import this module like so:

import {AsyncSelect} from 'spaceweb/asyncSelect'

It exports the following components or utility functions:

• AsyncSelect
• GroupedAsyncSelect
• STATE_CHANGE_TYPE
• arrayToGroupedOptions
• defaultAsyncSelectFilterOptions
• defaultCreateOption
• normalizeOptions
• useAsyncOptions