React-select: On demand fetch for values (onClick)

[yarnball]

Hi,

I am using the Async multi-select component. I would like to make it work by fetching data only when an onClick is pressed.

Each time it is pressed, it should fetch from the API again.

My attempt below was unsuccessful, as it only kept the original values from the first fetch.

var AddNew = React.createClass({
  propTypes: {
    label: React.PropTypes.string,
  },
  getInitialState () {
    return {
      backspaceRemoves: true,
      multi: true,
      show:false,
      valueText: RichTextEditor.createValueFromString((this.props.photo && this.props.photo.info && this.props.photo.info[0] && this.props.photo.info[0].text) || '', 'html'),
    };
  },
  open:function() {
    this.setState({showModal: true});
  },

  close: function() {
    this.setState({showModal: false});
  },
  onTagChange (value) {
    this.setState({
      value: value,
    });
     console.log("Selected: " + (JSON.stringify(value)));
  },
  onTitleChange(e) { 
    this.setState({[e.target.name]: e.target.value})
  },
  getTags (input) {
    return fetch(TAG_API, 
      {
      headers: {
        'Authorization': 'JWT '+ localStorage.getItem('token'),
      }
      }
      )
      .then((response) => response.json())
      .then((json) => {
        return { options: json };
      });
  },
  onChangeEditor: function(value) {
  this.setState({value});
    if (this.props.onChange) {
    }
  },
  render () {
    const AsyncComponent = !this.state.creatable
      ? Select.AsyncCreatable
      : Select.Async;

    return (
    <div>
      <Button className="floatBtn" onClick={(event) => { this.open(); this.getTags();}}>
          Add new
        </Button>
        <Modal className="modal-dialog" show={this.state.showModal} onHide={this.close}>
          <AsyncComponent className="tagarea" multi={this.state.multi} value={this.state.value}
            onChange={this.onTagChange} valueKey="id"
            labelKey="name" loadOptions={this.getTags} placeholder="Tags here..."
            backspaceRemoves={this.state.backspaceRemoves} />
        </Modal>
    </div>
    );
  }
});

[pmwisdom]

I commented this in another thread... but this is how you can hack it to sort of make it work, so that when the select opens, it loads the options instead of it doing it when the component mounts.

```javascript
class CustomSelect extends Select {
public handleInputFocus() {
super.handleInputFocus();

    if (this.props.async) {
         // Has to be something other than '' or it will ignore it (since the initial state is '')
     this.props.onInputChange(' ');
}
}

}

````

Then you can use the async's render prop

``` javascript

````

Very hacky though

[Quantumplation]

Anyone have an updated solution for v2?

[mike391]

A v2 solution would be nice

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're cleaning up and closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version v3 and beyond.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!