How to programmatically trigger Async loadOptions

[thisthatother]

In my application, I have an onChangeHandler in the first react-select that makes an AJAX call to get the data for populating a second react-select on the page. It needs to populate the second one automatically, with no typing required to trigger the loadOptions. I have not seen any examples that do it like this-- i.e. in the example here, it seems to require typing into the second select to trigger the load.

Is an automatic load like I describe even possible?

[duytbp]

AFAIK, loadOptions can not be triggered manually outside of Async component :(

[kinyat]

One of the workaround is using key props of a component.

When you want to tigger loadOptions again, give it a different key so it will re-render the part with react-select component.

I hope we can have a proper API to trigger this outside of Async component

[haseeb075]

I have tried key method but in 2nd render it some how mix the previous API response to the last one which was called with key prop

[oldmill1]

I think @phamthaibaoduy is correct, and loadOptions can not be triggered manually outside of the Async component. However, you can always just use Select (without Async) with onInputChange and get the desired result you want: both "type to search" and dynamic loading.

// SelectInput.js
render() {
    <Select
        onInputChange={this.onInputChange.bind(this)}
        value={this.state.value}
        options={this.state.options || []}
    />
}

Instead of getting the options from loadOptions, we can keep them in the component state.

Every time the user types in Select, Select calls onInputChange and passes along the string that the user typed. We then call our api function which returns a Promise. If the Promise resolves successfully, we set this.state.options to the array returned from the API.

onInputChange(option) {
    this.getOptionsAsync(option)
}

// We expect results to be returned in [{value: '', label: ''},...] format
getOptionsAsync(newInput) {
    get({ input: newInput }).then(({results, error}) => {
        this.setState({
            options: results ? results: [],
            value: newInput
        })
    })
    .catch((error) => {
        console.error(error)
    })
}

[alexcroox]

@kinyat the key trick was genius. After struggling for an hour to get 1 select to change options in another select (and have the updated options available on first click), your key suggestion worked first time. Thank you!!

[haseeb075]

What key you have passed into the AsyncSelect?

[aliasgar-choolawala]

@alexcroox Could you please help me out? I am facing an issue similar to urs...
<Select.Async
key={this.state.specialitySelected}
multi={this.state.multi}
value={this.state.value}
onChange={this.onChange}
valueKey="value"
labelKey="label"
loadOptions={this.getDoctors}
backspaceRemoves={this.state.backspaceRemoves}
onValueClick={this.getDoctorDetails}
cache={false}
ref="listing"
/>
This is my Select.Async, and i want to trigger loadOptions on first click after value of another Select is modified.

i am fetching the value of specialitySelected from the props of my component, and modifying it in componentWillReceiveProps

the state of specialitySelected is getting modified but the Select still shows old data on first click, and modified data on second click

[jkeruzec]

I'm facing the same issue here with Select V2

I have n async select and I would like to trigger a new fetch depending on other select component values.

When a select is triggered with Open Menu for example, I want to refresh the list of available values.

I will try to use ref possibilities and access directly internals like blur/focus to change the state of select component directly... :/

edit for Async Select with Select V2:

I make it work using internal ref but it's quite a mess.

Basically you can use a ref for each different select component you are using.
ref={ref => setRefFn(ref)}

Then when a value changed from one of my combobox, I call a specific function to update select refs :
I reload options here and update already selected values

 updateEndUserProductRef() {
        let ref = this.endUserProductRef;
        if(ref !== null) {
            ref.loadOptions('', function (options) {
                if (!ref.mounted) return;
                let isLoading = !!ref.lastRequest;
                ref.setState({ defaultOptions: options || [], isLoading: isLoading });
                     
                    ref.select.select.setValue(newValues); // Update current selected values of combobox. Be careful with infinite loop here !
                }
                
              });
        }
    }

[pratapbunga]

Was struggling around for a couple of hours, your suggestion worked like magic. Thank you @kinyat

[rovolution]

I would really really appreciate an API to accomplish this!

[arokiaprabha]

@kinyat I have been struggling to get this work for a quite amount of time. Your suggestion worked. I prefer to have this feature as part of the Async component like disabling cache or something.

[shpsyte]

One of the workaround is using key props of a component.

When you want to tigger loadOptions again, give it a different key so it will re-render the part with react-select component.

I hope we can have a proper API to trigger this outside of Async component

Can you provide an example?

[ebonow]

This seems important enough to raise as an issue as this approach to the work around seems very much like a hack and could potentially have negative consequences in certain use cases.

I'm adding the needs-review as I would like to play with the idea of allowing the cacheOptions to be a reset mechanism. I'm judging by the implementation and type Any assigned to it, that it may have been likely intended to be used this way, though I am making assumptions.

[Jorybraun]

Re - second this issue. an on focus handler would be great.

[alexandrehpiva]

Another hack without ref from a duplicate post

#1581 (comment)

[ebonow]

Re - second this issue. an on focus handler would be great.

Greetings @Jorybraun, react-select provides an onFocus handler/prop or one can even be added to the Input element itself. Was there a specific use-case you were looking for that's not currently handled?

[tannerhallman]

Hi, here's a simple, yet working example of a fetch of data onFocus (clicking the input) and using the <Select /> from "react-select": "^3.2.0",. Note: it does not use the <Async /> component.

import Select from 'react-select'


export default function LazyLoadAsyncSelect({ }) {
  const [selectedValue, setSelectedValue] = useState(null)
  const [options, setOptions] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  function _onChange(object, { action }) {
    switch (action) {
      case 'input-change':
        if (object) setSelectedValue(object)
        return
      case 'menu-close':
        return
      case 'clear':
        return
      case 'select-option':
        if (object) setSelectedValue(object)
        return
      default:
        return
    }
  }

  function getOptionsAsync() {
    // this is where you would hit your API async instead! I've added a timeout for demo purposes and some sample data.
    setIsLoading(true)
    new Promise(resolve =>
        setTimeout(
          () =>
            resolve([
              {
                id: 3,
                name: 'General',
              },
            ]),
          1000
        )
      )
      .then(response => {
        // map options to {label, value}
        setOptions(response.map(tag => ({ label: tag.name, value: tag.id })))
      })
      .catch(error => {
        console.error(error)
      })
      .finally(() => setIsLoading(false))
  }

  return (
    <Select
      value={selectedValue}
      options={options}
      onFocus={getOptionsAsync}
      onChange={_onChange}
      isLoading={isLoading}
    />
  )
}

[matini250]

This is the best solution I've found and it works perfectly 🥇
Thank you! @tannerhallman

[geekysam7]

Both awesome solutions @kinyat and @tannerhallman. Thanks!

[Ayub1224]

onFocus={getOptionsAsync}

@kinyat Bro that key prop solved my issue, i was struggling for 4-5 hrs before i get this solution, thanks Buddy.

[Wellusioner]

This is solved my issue.

<AsyncSelect
    key={JSON.stringify("something that changes over time")}
 />

But I am getting an error like this:

[wwwouter]

FWIW: In a form that is set to invisible when an item is added and I use the boolean with the visibility state as key, like this:

< AsyncSelect 
    key={addingParent.toString()} // This resets the selection for when the form is re-opened      
/>

[khurram-wasim]

I am facing a strange issue regarding the purposed solution
I assign a new key to Async select on every key press, as well as on scroll ( when user scrolls to the bottom of select )

But on every key press and on scroll the menu closes
though it fetches data correctly, and data is visible when I reopen the select
the props look like:

          <AsyncSelect
            cacheOptions
            key={key}
            defaultOptions={options}
            loadOptions={loadOptions}
            onInputChange={handleInputChange}
            isClearable={true}
            menuPlacement={menuPlacement}
            backspaceRemovesValue={true}
            onChange={onChange}
            openAfterFocus={true}
            openOnFocus={true}
            openMenuOnFocus={true}
            noOptionsMessage={() => null}
            inputValue={inputValue}
            isDisabled={isDisabled}
            classNamePrefix="select"
            value={resetValueOnSelect ? null : selectedOption}
            className={`basic-single-select basic-async-select ${className || ""}`}
            placeholder={placeholder ? placeholder : "Select..."}
            styles={appliedStyles(!isSearchable)}
            components={{
              ClearIndicator: null,
              IndicatorSeparator: null,
              LoadingIndicator: null,
              DropdownIndicator: isSearchable ? SearchIndicator : DropdownIndicator,
              Option: IconOption,
            }}
            {...(props.onMenuScrollToBottom && {
              onMenuScrollToBottom: props.onMenuScrollToBottom,
            })}
          />

[Gimnath-January]

Exact issue I'm facing

[maral]

Same for me. It's just so frustrating not having any API for this and having to rely on hacks for years (the original issue is from 2017).

[bogdanAndrushchenko]

I didn't have to try many cases.
I went the way of dynamically changing the key, then loadOptions is triggered.

const [state, setState] = useState(false);

const SelectMenuButton = (props) => {
  console.log(props, 'components.MenuList')
  return (
    <components.MenuList  {...props}>
      {props.children}
      <Button appearance="link"
              onMouseDown={()=>props.setState(true)}
              onMouseUp={()=>props.setState(false)}
              onClick={() => console.log('click')}>
        Show more
      </Button>
    </components.MenuList>
  )
}

<AsyncCreatableSelect
  key={`${name}${state}`}
  ref={selectRef}
  placeholder={`Start typing to choose "${name}"`}
  cacheOptions
  defaultOptions
  isMulti
  loadOptions={(inVal)=>getOptions(inVal, state)}
  components={{MenuList: s=> <SelectMenuButton {...s} setClick={setStae}/>}}
/>

[grt-mark]

How do we prevent the menu from closing when we use the onMenuScrollToBottom as a loadmore function becaue it closes when the options value is changed

[bogdanAndrushchenko]

@grt-mark What about custom handling? like isMenuOpen

[grt-mark]

its working now idk what happened but the menu stays open now during lazy loading haha

`const AsyncSelectLazy = ({ options, onLoadMore, onChange, onSearch, isFetching }) => {
return (

<Select
filterOption={createFilter({ ignoreAccents: false })}
onChange={onChange}
options={options}
onInputChange={onSearch}
onMenuScrollToBottom={onLoadMore}
isLoading={isFetching}
cacheOptions
defaultOptions
/>

);
};

AsyncSelectLazy options={data} onLoadMore={handleLoadMore} isFetching={isLoading} />
`