Deleting of letters from query when typing fast

[PrincAm]

I'm heading to issue with autocomplete when I'm trying to asynchronously fetch data via onSuggestionFetchRequest. Some letters are deleted from the query when user is typing fast. This issue is proved only in IE11. Using React version 16.2.0, React Autosuggest version 9.3.2 and Redux for global state management.

First, I thought it is clearly connected to well described problem with onChange in IE11 but an update of React to version 16 didn't help.

Then, I found the problem with canceling of old async request when fetching data. Unfortunately, this did not help as well.

Any help or hint is highly appreciated!

Example of code:

const mapDispatchToProps = (dispatch, ownProps) => ({
  onSuggestionsFetchRequested_test: (latestRequest) => ({value, reason}) => {
    if (reason === 'input-changed') {
      dispatch(start(value))
      const thisRequest = latestRequest = fetch(`/autosuggest/request`)
        .then((resp) => resp.json())
        .then((json) => {
          if (thisRequest !== latestRequest) {
            return
          }
          dispatch(success(paramsHash, json))
        })
    }
  }
  
export class Component extends React.Component {
  constructor(props) {
    super(props)
    this.latestRequest = null
  }

  render() {
    const {onSuggestionsFetchRequested_test} = this.props

    const inputProps = {
      value,
      onChange,
      autoFocus: true,
      placeholder = 'Enter query...'
    }

    const onSuggestionsFetchRequested = onSuggestionsFetchRequested_test(this.latestRequest)

    const autosuggestProps = {
      suggestions,
      onSuggestionsFetchRequested,
      onSuggestionsClearRequested,
      getSuggestionValue,
      renderSuggestion,
      inputProps
    }

    return (
      <Autosuggest {...autosuggestProps} />
    )
  }
}

[ianlyons]

@moroshko I'm having the same issue, albeit on 15.6.2 -- have you had any other reports of issues around this with React 16?

[vKongv]

Having the same issue in IE as well. Any update?

[PrincAm]

In our case, this issue was caused by race condition when fetching suggestions. If user types, request is send with every key press and then autosuggest value can be updated by old response. Since promise is not possible to cancel we resolved this problem by switching to observables and introduced RxJS and redux-observables. Then request is canceled when new one is started. If you want I can provide example.

[vKongv]

So this is my code handling onChange and fetchRequested:

    onChange(e, { newValue, method }) {
        if (method === 'type') {
            this.setState({
                value: newValue,
            });
            fetchData(newValue);
        }
    }
    onSuggestionsFetchRequested({ value }) {
        fetchData(value);
    }

The only place where we set the input state is in onChange and will this actually introduce the race condition?

It will be great if you can provide me some examples.