How to force reload of options?

[obykoo]

I want to reload default async options , when use enter some data in other part of app,but I do not know how to force reload of options.

[Luke1298]

+1

[keehun]

Any update on this?

[aarmel-sw]

I have a dropdown for country which then determines the Async.Select "options".

Change function for the country select reloads the options for the Async location select.

_handleChange_country() {
  if (this.refs.country.value != this.state.country) {
    this.setState({
      country: this.refs.country.value,
      location_value: []
    })
    this.refs.bob.loadOptions('')
  }
}`

//// Inside render()
<select
  ref="country"
  value={this.state.country}
  onChange={this._handleChange_country}>
.....snip options...
</select>

<Select.Async
  ref="bob"
  multi={true}
  placeholder={this.props.search_placeholder}
  value={this.state.location_value}
  onChange={this._handleChange_location}
  loadOptions={this._getLocationOptions.bind(this)}
  valueKey='value'
  labelKey='label'
  autoload={false}
  cache={false}
>

[MacKentoch]

Apart from hacking with reference, is there a cleaner / built-in way to handle a refresh?

[aarmel-sw]

I'm not aware of any way at the moment. What is being asked for is a way to force a refresh of the options based on something else in an application changing (which could be a lot of things).

Only option I can think of is to have a listener of some sore on that something that then calls this.refs.bob.loadOptions('') to refresh bob's options. Or inbuilt into the Select.Async application to run "loadOptions('')" when it receives a new prop. That's if anyone out there wants to try and modify Select.Async to have a refresh options option.

[kevingilbert100]

Any update on this?

[adnanfajlur]

any update on this?

[aarmel-sw]

With the latest version.

I have a react component that use AsyncSelect, latest version has changed a bit.

In this I have a clearValues function. In the component that has all the other form controls, I call the clear values function when I need to reset the values of the Async Select.

  _handleChange_country(event) {
      this.refs.async_location_select.clearValues()

      this.setState({
        country_eq: this.refs.country.value,
      })
  }

  clearValues = () => {
    this.refs.async.select.state.value = ''
  }

In the render AsnycSelect_Location_Component

     <AsyncSelect
        ref              = 'async'
        noOptionsMessage = { () => 'Type in location' }
        styles           = { customStyles }
        placeholder      = 'Enter city, state or postcode'
        isMulti
        cacheOptions
        loadOptions      = { this.loadOptions }
        defaultOptions   = { false }
        onInputChange    = { this.handleInputChange }
        onChange         = { this.trackChanges }
        defaultValue     = { this.props.defaultValue }
        components       = {{ LoadingIndicator, DropdownIndicator, Input }}
      />

[alexfoxgill]

why doesn't it just reload if loadOptions changes? seems like that would be simple enough, just check on componentWillReceiveProps

[aarmel-sw]

@alexfoxgill LoadOptions is also a promise or callback. It loads the values displayed for the user to select from, not what they have already selected. What's being asked here is to clear what has already been selected. So in this case load options is not changed at all.

[alexfoxgill]

i think we have our wires crossed. i want to use the component like this:

interface Props {
  externalValue: string
  value: string
}

interface State {
  loadOptions: (search: string) => Promise<string[]>
}

class MyComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      loadOptions: (search: string) => callExternalApi(props.externalValue)
    }
  }

  componentWillReceiveProps(newProps: Props) {
    if (newProps.externalValue !== this.props.externalValue) {
      this.setState({
        loadOptions: (search: string) => callExternalApi(newProps.externalValue)
      })
    }
  }

  render() {
    return <AsyncSelect
      value={this.props.value}
      loadOptions={this.state.loadOptions} />
  }
}

do you see? loadOptions should reload whenever the function changes

[aarmel-sw]

My bad I was thinking of something completely different. In the case here its a externalValue prop that is changing not the function, the function is then meant to receive a different value. Unless you changed the actual function name or something.

[alexfoxgill]

when externalValue changes, the this.state.loadOptions function is recreated. this means it is a different object reference and can be compared by the component

[helmarluiz]

This works for me:

<Async
  key={JSON.stringify(this.state.someUpdatedProp)}
  ...
  />

Example working: https://github.com/helmarjunior/react-hooks-select-async

[alexfoxgill]

@helmarluiz that works well, thanks!