SelectAsyncChoicesWidget

This is a React component

Most Select props in addition to the below. Note the following restrictions: mode is set to "multiple" when asyncChoices.multiple is true, labelInValue can't be changed, notFoundContent is set to loadingContent when choices are resolving otherwise notFoundContent

Whether pages should be accumulated as more are fetched. This defaults to true and means that whenever the next page is fetched it is appended to the bottom of the list.

Defaults to true

The AsyncChoices instance to use.

Function to build query object to pass through to asyncChoices.list.

By default this will be an object containing a the current search keywords under the key keywords.

The function is passed an object containing

• keywords - the current search keywords
• isOpen - whether the select is open
• input - the current form input object. The current value can be extracted from this.

Defaults to ({ keywords }) => ({ keywords })

Whether to clear and fetch fresh results when the drop down is opened after the initial fetch. If this is set to false then the only time fresh results are fetched will be when the search filter changes or a new page of results is retrieved.

This defaults to true.

Number of milliseconds to debounce changes to search keywords before an API call will be triggered. Set to 0 to disable.

Defaults to 300

Any extra options to pass through to list

These will be available in both useListProps and list under the listOptions key

Content to show when the dropdown is open and in the loading state. This it passed through to notFoundContent on Select. If you pass through notFoundContent it is only used when not in the loading state.

Defaults to 'Fetching results...'

Any extra props to pass through to the Select.Option that wraps the next page button.

This can be useful for thing like passing className or ID's for testing, eg:

nextPageOptionProps={{ 'data-testid': 'select-option-next-page' }}

If provided this function will be called whenever asyncChoices.retrieve errors

You can use this to do things like unset a value if it no longer exists.

If provided this function will be called whenever a value is successfully resolved using asyncChoices.retrieve.

Any extra props to pass through to Select.Option. This can be useful for thing like passing className or ID's for testing, eg:

optionProps={{ 'data-testid': 'select-option' }}

Function to render the button for fetching the next page of results.

Function is passed an object with:

• paginator - the Paginator instance
• isLoading - whether the widget is currently in a loading state

Can pass false to disable this functionality entirely.

Note that this is always rendered within a Select.Option. You can pass nextPageOptionProps to pass additional props to this eg. for styling.

Defaults to:

function defaultRenderNextPageButton({ isLoading, onClick }) {
  return (
    <Button loading={isLoading} block type="link" onClick={onClick}>
      Fetch More
    </Button>
  );
}

Any extra options to pass through to retrieve

These will be available in both useRetrieveProps and retrieve under the retrieveOptions key

Whether to call the Endpoint immediately when the select has not been opened (eg. before the initial open and after it's closed when the search value is cleared)

Defaults to false