New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clicking on a suggested option does not select it on IE10/11 #193

Closed
nop33 opened this Issue Apr 29, 2016 · 29 comments

Comments

Projects
None yet
4 participants
@nop33

nop33 commented Apr 29, 2016

Hello,

When the typeahead is set to searchOnFocus, the aforementioned problem occurs on IE11 (11.0.9600.18282). It requires 2 clicks on the option you want to choose and one more outside in order to close the dropdown.
Here is a jsfiddle to reproduce it: http://jsfiddle.net/eyetea/ucjfo4ed/3/

jsfiddle

@nop33 nop33 changed the title from Clicking on an suggested option does not select it on IE11 to Clicking on a suggested option does not select it on IE11 Apr 29, 2016

@nop33 nop33 referenced this issue Apr 29, 2016

Closed

Fixes for location widget #2374

3 of 4 tasks complete

@running-coder running-coder added the Bug label May 2, 2016

running-coder added a commit that referenced this issue May 3, 2016

@running-coder running-coder added this to the 2.6.1 milestone May 3, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented May 3, 2016

Should be good now, the error was happening on all IEs

running-coder added a commit that referenced this issue May 3, 2016

Version 2.6.1
Fixes
- #189 Twice url encoding
- #190 Strange JS-code fragment in href attribute value in result list when using jQuery version below 1.10
- #192 Results remain open when clicking inside a second typeahead field
- #193 Clicking on a suggested option does not select it on IE11
@nop33

This comment has been minimized.

nop33 commented May 10, 2016

Hello and thanks for your quick response!
The problem is not completely fixed. The first problem remains. Clicking on a suggested option from the dropdown list will lead to showing the placeholder inside the input field (instead of the newly selected value). A second click on the suggested option will effectively choose it and close the dropdown.
Just by opening this jsfiddle in any IE will reproduce this issue: http://jsfiddle.net/eyetea/ucjfo4ed/3/
Thanks again!

@running-coder

This comment has been minimized.

Owner

running-coder commented May 10, 2016

Thought it was fixed, I'll double-check as soon as I get some extra time

thx Ilias

@running-coder running-coder reopened this May 10, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented May 15, 2016

Found out IE10/11 is triggering input event on focus IF a placeholder is set which is causing the issue. Damnit IE...
https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

@nop33

This comment has been minimized.

nop33 commented May 15, 2016

We all know how easier life would be if not for IE...

@nop33

This comment has been minimized.

nop33 commented May 18, 2016

Any ideas for workarounds 😒 ? Apart from not using a placeholder...

@running-coder

This comment has been minimized.

Owner

running-coder commented May 18, 2016

I started working on it the other day adding hacks all around and reverted everything cuz at some point it started to pollute the logic ... don't know for now :/

@dkaleky

This comment has been minimized.

dkaleky commented Jul 26, 2016

We have an IE 11 issue. http://florida.com/iwantto the drop down for cities -- happens in 4 places on the website- we tried new version

@nop33

This comment has been minimized.

nop33 commented Jul 26, 2016

You just posted a 404 page. What dropdown for cities are you talking about?

@dkaleky

This comment has been minimized.

@nop33

This comment has been minimized.

nop33 commented Jul 26, 2016

Try to reproduce the problem in jsfiddle. If it's still broken there, it's a bug of the library. If not, it's a bug in your website and has nothing to do with this issue.
Cheers!

@dkaleky

This comment has been minimized.

dkaleky commented Jul 26, 2016

you can't reproduce it in jsfiddle with Live data.... only dummy data...

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 26, 2016

I'll give IE another round of testing and hopefully fix this issue without polluting Typeahead with workarounds. Do you have the placeholder issue @dkaleky or is it something else? I am unable to see the issue from the screenshots. Also I'll need your init config to reproduce.

@running-coder running-coder modified the milestones: 2.7.0, 2.6.1 Jul 26, 2016

@dkaleky

This comment has been minimized.

dkaleky commented Jul 26, 2016

Yes, @dkaleky is correct. I need to ask my coders about the "init config", as I dont know what that is.

Here is a video to show the issues. Eventually very quickly the browser freezes

https://goo.gl/rCniD6 give a few moments for it to show live.

It happens on many pages

@dkaleky

This comment has been minimized.

dkaleky commented Jul 27, 2016

@running-coder

Also I'll need your init config to reproduce.

Here is the Init config

http://pastebin.com/ngyQihF5

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 27, 2016

Perf, I'll have a look as soon as possible, most likely this weekend unless one of you guys got some time to have a look and open a PR.

@dkaleky

This comment has been minimized.

dkaleky commented Jul 27, 2016

My guys are too slow.

@nop33

This comment has been minimized.

nop33 commented Jul 27, 2016

I am sorry, I can't help it but to respond!

Until this point you have not provided any hint as to what kind of issue you found at the library. Did you find something broken in the library's code? Essentially, that's what the Github issue tracker is for. For me it looks like the code your coders wrote is buggy, since your website doesn't even work on Chrome and I find it hard to believe that all of the errors are the library's fault! There is one problem that this issue refers to and that's the one of using placeholders in IE (which is proven to be an IE bug at the end and @running-coder is trying to find a workaround).

So, asking the developer and the community of a library to solve problems of your website's code seems not very right! It could be a thousand things that break the functionality of the search fields in your website, not necessarily the library itself. For example, there might even be other event handlers in the JS code that mess up with what Typeahead does. But that's not a Typeahead problem 😄

I hope I don't end up being misunderstood! I just believe that trying to find the error is more important that just reporting a general problem and leaving others find the error for you.

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 27, 2016

@nop33 I was referring to the issue you also had at the beginning of the video https://goo.gl/rCniD6 where the user clicks a suggestion but gets a blank result (IE placeholder). If there is something more to do I must have missed it.

@dkaleky

This comment has been minimized.

dkaleky commented Jul 27, 2016

@running-coder the issue--

clicks a suggestion but gets a blank result

If that means this..... then yes

When user clicks on the city DROPdown, one of 2 things happens, takes a couple clicks to drop, and clicking on city, will not fill in the drop field.

It all works well on ALL browsers on ALL os's, (mac, win10) except as far as I can tell IE 11.~ (havent retested on less than IE 11~ ) Edge also works fine.

@dkaleky

This comment has been minimized.

dkaleky commented Jul 27, 2016

@nop33

since your website doesn't even work on Chrome

Well Chrome what? Checking now. Works on Mac. Havent seen windows issue.

Thanks for the heads up!

Chrome Win 10 and Mac work for me.

@nop33

This comment has been minimized.

nop33 commented Jul 28, 2016

@dkaleky try to click on the city field here: http://www.florida.com/i-want-to and navigate using the down arrow to Miami for example. Then press the ENTER key. It doesn't select Miami. Same for all the fields here: http://www.florida.com/questions
I am on Chrome (Linux)

@dkaleky

This comment has been minimized.

dkaleky commented Jul 28, 2016

@nop33 I tried that on all browsers, and that is true issue for all. I never caught that. It is not major, and since it is true on all it is not you but us. However when there is a type ahead, enter does work
,thanks for heads up though. The major issue though IE 11 only

@hsdhott

This comment has been minimized.

hsdhott commented Jul 28, 2016

I am having a similar issue as @nop33. Typeahead works great in all browsers but in IE11. Only issue is, as @nop33 stated, it takes 2 clicks to get the option selected. First to get focus out of input, second for the selection. I've tried that removing placeholder from the input works great. Please let us know if you've found a workaround? Thank you :)

@dkaleky

This comment has been minimized.

dkaleky commented Jul 28, 2016

Thanks @hsdhott for validating my concerns! @running-coder is really responsive, so I hope it will get a quick fix!

running-coder added a commit that referenced this issue Jul 29, 2016

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 29, 2016

Let me know if this fix corrected the issue. (develop branch)

@running-coder running-coder changed the title from Clicking on a suggested option does not select it on IE11 to Clicking on a suggested option does not select it on IE10/11 Jul 29, 2016

@hsdhott

This comment has been minimized.

hsdhott commented Jul 29, 2016

@running-coder Seems like issue has been fixed. It's working great for me. I appreciate your help and thank you for your quick response. 👍

@hsdhott

This comment has been minimized.

hsdhott commented Jul 29, 2016

Will this fix be coming in the next release? Right now I added the fix in my local js file but it will be great to have it in the library's minified files.

@running-coder

This comment has been minimized.

Owner

running-coder commented Jul 29, 2016

@hsdhott Yes, it's part of the 2.7.0 milestone, I only have a few issues left to resolve before releasing it. You can also use the minified file from this commit, it contains the fix.

As a side-note (some people might not be aware) If you are using bower or npm you can always specify a commit hash instead of the tag version to have the fix when you are pulling / building your assets so you don't have to wait for the next tag to be created.

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default

running-coder added a commit that referenced this issue Aug 13, 2016

Version 2.7.0
Features
    #198 Using an async function as a data source
    #195 Add `onCancel` callback

Fixes
    #221 On form reset, input field clears but the value persists
    #211 Global reset styling on inputs has bad effects, keep them local to instantiation
    #208 No distinction between "click" and "enter" selection in onClick callbacks
    #193 Clicking on a suggested option does not select it on IE10/11 Bug
    #184 Invalid encoded characters on dynamic requests for `{{query}}` inside $.Ajax.url

More goodies
    #222 Add JSHint validation
    #215 Fix "main" property in bower.json
    #213 Allow scss customization via !default
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment