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

Already on GitHub? Sign in to your account

[typeahead] clicking on any option does not work all the time on Chrome #4018

Closed
thbar opened this Issue Jul 6, 2012 · 40 comments

Comments

Projects
None yet

thbar commented Jul 6, 2012

To reproduce, open http://twitter.github.com/bootstrap/javascript.html#typeahead with Chrome and Mac OS X.

Half of the time for me (with Chrome 19.0.1084.56 on Mac OS X Lion), clicking does not select the option, but rather, close the list and leave the already typed letters without completing the letters.

I believe the issue is related to #3521 and #3504 but provides more details; I hope we'll be able to pinpoint the issue this time.

Note that I could never reproduce the bug on Safari (5.1.3) nor on Firefox (12.0)

ricn commented Jul 6, 2012

I tested it 12 times (I refreshed the page after 3 times) with Chrome 20.0.1132.47 on Mac OS X Lion. I couldn't reproduce the problem.

thbar commented Jul 6, 2012

Related:

I see it here as well. I've patched based on those other bugs here at work.

thbar commented Jul 6, 2012

I wonder if it could be linked to Chrome 19 specifically. @ricn is on 20 and does not meet the issue, while I'm on 19 and seeing the issue.

@danielfarrell what is your Chrome version?

Btw: thanks guys for chiming in!

I'm on 19

thbar commented Jul 6, 2012

Figured out: this issue is a duplicate of #2715, so I will close it for now.

I pushed @mckramer fix at thbar/bootstrap@92189b8 and will mention that over there.

@thbar thbar closed this Jul 6, 2012

Just upgraded to 20 and still see it, although it maybe happens less. If I had to guess I'd say it happens more often on faster machines.

thbar commented Jul 6, 2012

It definitely looks like some timing issue yes!

I hope the patch will be merged back.

ricn commented Jul 6, 2012

I read the instructions for #2715 and then I could reproduce the problem on version 20 as well. I guess I did not hold down the mouse button long enough the first time.

MrVibe commented Aug 21, 2012

Facing the same issue on Chrome Version 21.0.1180.79, selecting the option form keyboard keys works but using a mouse no update in the input box. Any fixes yet?

Effie commented Aug 27, 2012

Facing the same issue on Mountain Lion in Chrome 21.0.1180.82 and Safari 6. Mouse click doesn't work, keyboard works fine.

eads commented Sep 24, 2012

Replicated on Chrome 21.0.1180.89. Works fine in Firefox. This ticket should be reopened.

I'm facing this issue too on OS X Lion and Chrome 22. I'm seeing this in my own app and on the typeahead sample on the bootstrap site.

I'm on a MacBook Pro and I've noticed that this happens only when I select an option by pressing the mouse button.

When I use tap to click it selects the option just fine.

Is anyone else getting the same behavior?

jzabel commented Oct 3, 2012

I, too, am seeing this issue using 2.1.1 with the following conditions: Chrome 22.0.1229.79, Mac OSX 10.8.2. It seems to be a timing/focus thing. Firefox, Safari, etc all work without problem. Using the keyboard to select works fine, it is only on the mouse press.

Some thoughts:
-If you double click quickly, the browser catches this as a "click" event and it works. I suspect it is focusing the element in question and then firing a "click" event. Based on the chrome debugger tools, only a click event is being fired and not a dblclick event.

-The patch here: thbar/bootstrap@92189b8 resolved this problem for me.

I'm seeing this issue with Chrome 22 on Mac OS X 10.8.2 as well. Any chance we can get this issue reopened?

OSX 10.8.2 with Chrome 22.0.1229.94 - seeing the same bug, sometimes the options does not select when clicking it with the mouse. Works fine using the keyboard for selection.

vigo commented Oct 22, 2012

osx 10.8.2 , chrome 22.0.1229.94 bug continues...

osx 10.7.5, Chrome Version 22.0.1229.94 issue still exists. Anyone figure this out yet?

jcorall commented Oct 28, 2012

Exact same setup as @vigo (twitter#4018 (comment)), and experiencing this bug.

I tested this in Chrome 23 beta and it is fixed. Only a little while to wait until Google rolls that out to all the Chrome users.

dikirill commented Nov 7, 2012

Just checked in Chrome 23.0.1271.64 m (updated today) - bug continues to appear.

agent462 commented Dec 1, 2012

I had the same problem and fixed it by updating the following in bootstrap-typeahead.js

, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 250)
}

nvaken commented Dec 10, 2012

Same problem here.

This patch also did the trick for me I think: thbar/bootstrap@92189b8

fwiw...

I would have this issue where some times the item was not selected on a click using firefox but i applied the fix from agent462 and from my testing this fix solved the problem.

@agent462 Thanks, that patch fixed it for me too. Worked fine for OS X 10.8.2 in Safari Version 6.0.2 (8536.26.17) and Firefox 17.0.1, but not Chrome Version 23.0.1271.101

arman-h commented Jan 9, 2013

@agent462, thanks!

Was having the same issue on OSX 10.6.8 using Chrome 23.0.1271.101. Your patch worked for me as well.

reidja commented Jan 15, 2013

Just in case anybody runs across this issue in the future:

This issue can be replicated by selecting an item and holding down the mouse button without releasing. If you do this the setTimeout event will be fired after 150ms causing the menu to hide and your selection to be lost.

Change the events for the menu from a click event to a mouse down. This will cause the selection to be abrupt but timing issue's shouldn't matter any more.

Because holding the mouse down doesn't work anyways there shouldn't be any harm in changing it.

this.$menu
        .on('mousedown', $.proxy(this.click, this)) // Change this from 'click' to 'mousedown'
        .on('mouseenter', 'li', $.proxy(this.mouseenter, this))

My typeahead plugin is pretty modified but it was around line 208.

I usually try to solve problems without forking/modifying a plugin code (since its not a performance issue).

That's how I make it works :

$('ul.typeahead').live('mousedown', function(e) {
    e.preventDefault();
});

@reidja: Even if I don't hold down the mouse button for very long - i.e. a simple quick click - it still doesn't work most of the time - not sure if it ever worked though. However, hitting enter does work.
@flyder: thanks, your mod worked - I hope it doesn't have any currently unseen side effects though 😄

@benjaminu I did not see any side effects with that code. Im glad it was useful for you.

@flyder: Beautiful, worked for me as well...

guyisra commented Feb 11, 2013

@flyder - since live() is deprecated and doesn't work anymore on jquery 1.9.1, I can't seem to reproduce the same success with on() with

$('ul.typeahead').on("mousedown",  function(){
 e.preventDefault(); 
});

I doubt if this should make a difference, but did you try;

$('ul.typeahead').mousedown(function() {
    e.preventDefault(); 
});

It worked okay for me with jQuery 1.9.1

guyisra commented Feb 11, 2013

still didn't work for me. I read somewhere that it usually breaks on lists with 1 item

@guyisra I'm not planning switching on jquery 1.9.1 very soon. If you find the solution before me, please share it with us over here :)

Thank you!

@guyisra, @benjaminu I just upgraded to 1.9.1 and this solution works very well:

$(document).on('mousedown', 'ul.typeahead', function(e) {
    e.preventDefault();
});

@flyder perfect!

I'm running Mountain Lion, Bootstrap 2.3, JQuery 1.10.1 on Chrome 27.0 and somehow I don't need this fix anymore. Maybe a fix has been already pushed into Bootstrap. Anyone else experienced this?

We're still seeing it on Chrome 28, Bootstrap 2.3, JQuery 1.9.1. In our case, it looks like an integration issue with the typeahead and some other JS library because it doesn't occur in a simple sample that only includes the typeahead + JQuery 1.9. Nonetheless, the recommended workaround took care of our problem. Thanks!

I too faced the same issue i tried this code and it worked fine for me

$(document).on('mouseover', 'ul.typeahead', function(e) {

$(this).show();
});

@cvrebert cvrebert locked and limited conversation to collaborators Jun 14, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.