IE 11 Issues with AsyncTypeahead

[justinhp]

Unfortunately we still need to support IE 11 and it was found by our QA team that there was an issue in IE 11. It occurs when typing quickly into the Async Typeahead. It starts dropping characters in the input.

Version

v1.3.0

Steps to reproduce

1. In IE 11, go to https://ericgio.github.io/react-bootstrap-typeahead/
2. Quickly start typing any sentence into the AsyncTypeahead example
3. It starts dropping characters

Expected Behavior

Input is what you typed

Actual Behavior

Drops characters when typing fast

thanks!
Justin

[MHultman]

I would like to have this fixed as well!

This is not only in IE11. I've also experience it in Chrome.
I'm not able to reproduce this in the demo environment, but in our dev-project.

The problem appears when you add a delay for search.

1. you write.
2. 200ms goes by since last input.
3. Request goes to server.
4. You write something more before response returns.
5. Response arrive

The result is that the characters written in step 4 are removed.

[MHultman]

I've been searching for this bug for two days now ..
Appears only in IE 11.
When you change the options state in the <AsyncTypeahead ... options={this.state.options}.. /> this will trigger some rendering. If you write in the input during the render, the text state will be set to the search query text. The "effect" is that your last input is removed. Same goes when using backspace.

Hopefully someone else can have a look at it?

[justinhp]

@MHultman Thanks for looking into this. This seems to be an issue with React itself, however I believe it was fixed in the latest release, 15.6.x but haven't verified it. You can see a discussion of the issue here
https://github.com/facebook/react/issues/7027.

I ended up using react-autosuggest and implemented one of the solutions discussed here: moroshko/react-autosuggest#261 and an additional discussion can be found here moroshko/react-autosuggest#350. The same solution could probably be applied to this lib as well.

[bbarnell]

@MHultman @justinhp @ericgio @hyzhak @kav Yep. It's fixed in React version 15.6.1

[ericgio]

I'm unable to repro this issue on IE11 using React 15.6.1. I'll consider the issue closed unless someone reopens with more specific repro steps or a repro case. Thanks.