Asynchronous Searching Live Example Not Working Properly

In the Live Examples, under the section Asynchronous Searching, there is an example with the following code:

class AsyncExample extends React.Component {
  state = {
    allowNew: false,
    isLoading: false,
    multiple: false,
    options: [],
  };

  render() {
    return (
      <Fragment>
        <AsyncTypeahead
          {...this.state}
          labelKey="login"
          minLength={3}
          onSearch={this._handleSearch}
          placeholder="Search for a Github user..."
          renderMenuItemChildren={(option, props) => (
            <GithubMenuItem key={option.id} user={option} />
          )}
        />
        <FormGroup>
          {this._renderCheckboxes()}
        </FormGroup>
      </Fragment>
    );
  }

  _renderCheckboxes() {
    const checkboxes = [
      {label: 'Multi-Select', name: 'multiple'},
      {label: 'Allow custom selections', name: 'allowNew'},
    ];

    return checkboxes.map(({label, name}) => (
      <Control
        checked={this.state[name]}
        key={name}
        name={name}
        onChange={this._handleChange}
        type="checkbox">
        {label}
      </Control>
    ));
  }

  _handleChange = (e) => {
    const {checked, name} = e.target;
    this.setState({[name]: checked});
  }

  _handleSearch = (query) => {
    this.setState({isLoading: true});
    makeAndHandleRequest(query)
      .then(({options}) => {
        this.setState({
          isLoading: false,
          options,
        });
      });
  }
}`

The code above is resulting in a weird search bug (as far as I can see), which is as follows: When I search for “ale”, it finds numerous users in the dropdown, which is to be expected, next I add a character to “ale” which I know is not likely to be an existent username, for example “ale!”, it does not find a user with such username, again as expected. Although after I delete the “!” character, I’m again left with “ale” in my search, although unexpectedly I do not get the same results as I did when I first typed in “ale”, instead I got no results of users with such a username, which reminds me of my “ale!” search. It’s as if it did not recognize the character deletion from the search, and it still tried to search a username “ale!”. So I added a few print statements to debug the code, and actually saw that when I delete the “!” character, the __handleSearch function is not called at all, the last call is with the “ale!”. When I set the “isLoading” variable in the state to be always false, it actually worked… Here are the screenshots that show the issue:

[AJRenold]

I am working on a feature using this component and solved this issue by setting the useCache prop to false.

Hopefully this can be a useful breadcrumb to someone who further investigates this issue.

[jbialobr]

@ShreyaswadE Try this https://github.com/ericgio/react-bootstrap-typeahead/pull/521 fix - it helped in my case.