Letters are being deleted whilst typing fast in IE

[ElliotZhang]

• This should be a bug and can be reproduced in the example codepen http://codepen.io/moroshko/pen/ZQLyNK

• To reproduce:

  1. Open the example in IE 11. Focus on the input field
  2. Quickly type multiple letters in the field (it doesn't matter if there is valid suggestions or not), or hit backspace button repeatedly quickly on a long input string.

3. Notice sometimes the input change back to previous and looks like it is deleting (restoring if hitting backspace) letters.

I've tried it in my local with console logging debug and it shows the onChange() method is only fired once for multiple inputs and receiving an outdated value.
Any idea about this?

[moroshko]

Duplicate of #211.
Could you try it with React 16.0.0-alpha.6, and see if the issue still exists?

[ElliotZhang]

Thanks @moroshko , good to know. Not able to try React 16.0.0-alpha.6 in short notice as we have complicated dependencies. Will post the result later.

[bbarnell]

@moroshko This is a significant bug that makes this component not ready for production. How much longer before ReactJS 16.0 is released?

[moroshko]

@bbarnell

This is a significant bug that makes this component not ready for production.

I'm sorry for that, but there is not much we can do, I guess.

How much longer before ReactJS 16.0 is released?

React 16.0.0-alpha.12 is on npm. You are welcome to try it and report back if it solves the issue ;)

[gerhardsletten]

Have been looking at this issue some evenings, and something special happens in IE11 when we in the onChange-event both calls props.inputProps.onChange and props.onSuggestionsFetchRequested. Looks like new suggestions are interfering with the onChange event, because if you comment that out it works fine.

So we fixed this by delaying our async fetching of suggestion in 500ms, to ensure that the user has paused typing before new suggestions are sent into the Autosuggest-component:

onSuggestionsFetchRequested = ({value}) => {
    const {fetchSuggestions, suggestionsLoading} = this.props
    const escapedValue = escapeRegexCharacters(value.trim())
    if (!suggestionsLoading && escapedValue.length >= 3) {
      if (this.fetchSuggestionsTimeout) {
        window.clearTimeout(this.fetchSuggestionsTimeout)
        this.fetchSuggestionsTimeout = undefined
      }
      this.fetchSuggestionsTimeout = setTimeout(() => {
        fetchSuggestions(escapedValue)
      }, 500)
    }
  }

[bbarnell]

@moroshko Awesome!!! Can you update the CDN version so I can link to it?

[ElliotZhang]

@gerhardsletten 's fix might look like working for a while but it is such a temporary work around, since no one can guarantee the user won't type again after 500ms. @moroshko React 16.0.0-alpha.6 hasn't included the fix and I reckon the AutoSuggest component should address this issue in React 15.

[gerhardsletten]

@ElliotZhang yes, its true. We ended up disable the autosuggest for ie-users, waiting for react 16 to ship. I think it can't be fixed for IE in react 15

[ElliotZhang]

@gerhardsletten , I've tried replacing the onChange to onInput in Autosuggest component and it looks working well. Just one line of change. But will break IE9 and IE10 though, see facebook/react#7027

[gerhardsletten]

@ElliotZhang Yes, been there, done that. As I said, I have given up on this error. Think the best solution would be to short circuit react events and hooking into the dom-event yourself, but I don't want to go there ;-)

[bbarnell]

@moroshko @ElliotZhang @gerhardsletten @jarib @zachhale This issue has been fixed in React JS. I have only tested the latest version of React (15.6.1), so I don't know what version it was fixed in. You can close this issue.