IE 11/10 Support about react-bootstrap-typeahead HOT 17 CLOSED

Hey, thanks. Seems reasonable to try and support at least IE11. Are there any specific problems or errors you're running into when trying to get it to work?

from react-bootstrap-typeahead.

IE 11 support would be great. The issue I am seeing is I can only enter one character at a time. Meaning, after entering a character it does not allow me to continue typing the rest of the value. If I click out of the input box with my mouse and back in I am able to add one more character and so on.

from react-bootstrap-typeahead.

I am running into the same issue, there but with me its 2 characters

from react-bootstrap-typeahead.

The problem is it seems to lose focus while typing

from react-bootstrap-typeahead.

Yes, I'm seeing the same thing. The issue is the activeIndex in _renderMenuItem. When settting the activeIndex the focus gets confused on IE11.

Just as a workaround I did this:

diff --git a/react-typeahead/TypeaheadMenu.react.js b/react-typeahead/TypeaheadMenu.react.js
index f1be264..63b6516 100644
--- a/react-typeahead/TypeaheadMenu.react.js
+++ b/react-typeahead/TypeaheadMenu.react.js
@@ -123,7 +123,6 @@ const TypeaheadMenu = React.createClass({

   _renderMenuItem(option, idx) {
     const {
-      activeIndex,
       labelKey,
       newSelectionPrefix,
       onClick,
@@ -132,7 +131,6 @@ const TypeaheadMenu = React.createClass({
     } = this.props;

     let menuItemProps = {
-      active: idx === activeIndex,
       key: idx,
       onClick: onClick.bind(null, option),
     };

I'm not happy with this change but at least I isolated the root case and now we can discuss a proper solution.

from react-bootstrap-typeahead.

We hit the same issue today. Any likelihood of this being addressed soon? I realize that you all may be busy with other things, so just trying to get a sense.

Thanks for a wonderful component!

from react-bootstrap-typeahead.

Sorry for the delay on this. I don't have an IE environment and haven't gotten around to setting one up. I'd welcome a PR for this if someone wants to submit one.

from react-bootstrap-typeahead.

I was able to get a VM running with IE 11. I'm not able to repro the issue described above. I did see buggy behavior with the arrow key functionality and selecting menu items. Will look into this some more when I get a chance, but if anyone wants to help out, I'd appreciate it.

from react-bootstrap-typeahead.

I think I was able to solve the main issue, which is that the input was losing focus and the keydown event wasn't being registered correctly. I got things working in the remote VM using IE 11 & 10 (in emulation mode). If someone wants to confirm, you can try the new behaviors here: http://ericgio.github.io/react-bootstrap-typeahead/dev.html

from react-bootstrap-typeahead.

@ericgio, thanks so much for your quick response. I don't have access to IE11, but I had my QA person test your example on IE11 on a real PC. As far as we can tell, it works perfectly! So the question is - is this fix in yesterday's release 0.8.2 or something that you need to release?

from react-bootstrap-typeahead.

I still need to release it. I wanted to wait for some confirmation that the behaviors described above were gone.

from react-bootstrap-typeahead.

@ericgio, we can help you test the behavior. What exactly are you looking to test? I see from @goodeman's comment above that his main issue was:

The issue I am seeing is I can only enter one character at a time. Meaning, after entering a character it does not allow me to continue typing the rest of the value. If I click out of the input box with my mouse and back in I am able to add one more character and so on.

Anything else?

from react-bootstrap-typeahead.

Awesome, thanks! I suspect that the first few posts in this thread are no longer applicable because I've since modified the behavior of menu item activation.

If you can just confirm that the component now behaves more or less correctly and that you're no longer seeing the bugs you ran into, I'll feel confident about pushing an update. In particular, if you're able to try it in IE 10 (non-emulation) that would be really helpful. Thank you!

from react-bootstrap-typeahead.

@ericgio, I just tested on IE11, Microsoft Edge, Chrome and Firefox on a real PC. Everything seems to work fine, Unfortunately, I don't have access to IE10. Could you please push a new release?

from react-bootstrap-typeahead.

Fixed in v0.8.3.

For those curious, the problem was this line. It allowed the menu to scroll and keep the active menu items within the viewable area as the up and down arrow keys were pressed. I'm not sure why, but in Chrome and FF, the input doesn't lose focus because of this, allowing the component to work normally. IE does lose focus, however, which led to the strange behaviors.

The first menu item used to be activated by default when the menu opened, so as you'd type, it would always select the first menu item and lose focus of the input leading to the behaviors described above. I changed that behavior in v0.7.0, so that you had to press down to activate the first menu item. Typing in the input would have been fixed at that point, but pressing down would still blur the input and any further up or down keystrokes would no longer be registered by the keyDown handler.

To fix this, I added a partial polyfill (vertical-only) for scrollIntoViewIfNeeded, which will keep the menu items in view without blurring the input.

from react-bootstrap-typeahead.

@ericgio, thanks so much for your quick response.

from react-bootstrap-typeahead.

We had the same problem with IE11. I upgraded our project to
react-bootstrap-typeahead 0.8.3 and our QA team confirmed the problem is
gone.

Thank you for fixing this!

On Fri, Aug 5, 2016 at 7:46 AM, Naresh Bhatia [email protected]
wrote:

@ericgio https://github.com/ericgio, thanks so much for your quick
response.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#25 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAa1sI8sPA7D6SS7-nwyHmrW1t8Hji1oks5qcyKygaJpZM4IyeYm
.

from react-bootstrap-typeahead.