Typeahead menu and continuous mouse down #2715

Closed
zerkms opened this Issue Mar 21, 2012 · 31 comments

Projects

None yet
@zerkms

Steps to reproduce:

  1. Open http://twitter.github.com/bootstrap/javascript.html#typeahead
  2. Type the letter a in the input
  3. Move mouse over the first item
  4. Click and hold, don't release mouse button or move pointer
@quasipickle

My guess is the action is tied to mousedown rather than mouseup

@zerkms

@quasipickle: this wouldn't help. Menu is hidden because of blur. I solved it by an additional check in the blur to see if the cursor is above the menu, like this:

    setTimeout(function () {
        // hide a menu only in case if both menu and element have lost the focus
        if (!that.$element.is(':focus') && !that.$menu.is(':hover')) {
            that.hide();
        } else {
            that.$element.focus();
        }
    }, 150);
@fat
Bootstrap member

Yeah, we actually have this same issue on twitter.com - in tweetbox type @ + 1 letter... wait for autocomplete... mousedown and after about a second the autosuggest disappears.

@zerkms zerkms closed this Mar 22, 2012
@zerkms zerkms reopened this Mar 22, 2012
@fat
Bootstrap member

not necessarily - just pointing out this is a problem we have there too. Might put some time in to fixing it down the line :)

@mckramer

The timeout in the blur function forces the user to click and release before the timeout completes. If you throws some breakpoints on the blur and click functions you can see that blur is called if you hold down for too long and click is called if you click quick enough.

I think this is confusing functionality and would think it would be great if it was fixed. The code @zerkms posted works for me, but I think you can leave out the else clause and possibly simplify the if conditions.

setTimeout(function () {
  if (!that.$menu.is(':hover')) {
    that.hide();
  }
}, 150)

This code seems to work for me and provide proper click/blur handling.

@Iteratix

mckramer, used your code and it works great for us. Thanks!

@fmarsoni

If user drags from dropdown out of it, the click event won't trigger and dropdown will stay visible until you focus the input or click the dropdown again.

The easy ugly fix I'm using right now:
In function listen I changed the line:
.on('click', $.proxy(this.click, this))
with:
.on('mousedown', $.proxy(this.click, this))

@mckramer

@fmarsoni What is the use case for that? Most things don't function on mousedown. Try clicking on any link on the internet and dragging off it and releasing. The link won't be clicked. I am not sure why you would click and drag in the dropdown at all.

@NicholasBoll

I ran into this issue, but slightly more severe. The timeout is 150 milliseconds, which was too short for many of our users. The user presses down on the mouse button and the 150 ms blur timer starts. The user lifts the mouse button and thinks they selected an autocompleted item (since the menu disappears), but nothing is auto-completed.

Simple fix: Make this timeout long enough for slow clickers.

setTimeout(function () { that.hide() }, 300)
@fmarsoni

@mckramer
That's true.
But when you drag a link around you don't change the state of the page.
In this case dragging will do it. Input field doesn't have focus anymore so clicking somewhere in the page won't make the dropdown disappear as expected.
At this point the only way to close the dropdown is to click it (you are forced to make a selection even if you dragged out to avoid it) or focus the input and make it blur again.
Suppose you have an ajax web site, where clicking on some link hides the input: the dropdown will stay there...
Another common case: the customer I'm working for, an aged art historian, is used to mousedown in the dropbox and move around to highlight his choice and release (please don't ask me why :). This will make startdrag event happen and click event won't trigger anymore.
As web developers we tend to use things the right way, but sometimes we forget some users can really make a mess ;)

@fmarsoni

Tried zerkms solution and seems to work fine because it restores focus on input...

@thomascoomans

Is there a working solution for this? Because the 'timeout' functions don't solve the problem for me somehow...

@thomascoomans

That didn't work for me for some reason, I did the implementation like suggested on the blur() event, but my 'typeahead' menu keeps disappearing before I release my mouse button. The time I hold the button doesn't matter, I tried for like 1 second, for like 5 seconds,... .

@mckramer

@thomascoomans What browser and browser version are you using? And are you using a mouse or trackpad?

The problem with increasing the setTimeout value is it makes the dropdown linger longer than you probably want to if you voluntarily click away from the dropdown.

The solution that @zerkms posted or the simpler version I posted earlier should fix the issue. Throw together a jsfiddle if you can.

@fmarsoni

@thomascoomans
Maybe you forgot to set the doctype: <!DOCTYPE html>
The .is(':hover') will always return false if you don't set it.
I forgot once and I had the same problem.

@thomascoomans

I confirm the solution from 'zerkms'. It needs to be changed inside the 'bootstrap-typeahead.js'. I had hoped for a fix outside the source but hopefully a new release of the typeahead will fix this issue.

@thbar thbar added a commit to thbar/bootstrap that referenced this issue Jul 6, 2012
@thbar thbar Apply @mckramer fix for click bug on typeahead (#2715) 92189b8
@thbar

I can confirm both @zerkms and @mckramer solutions fix the issue for me (which happened almost all the time on Chrome 19).

I kept the shorter version from @mckramer (commited here).

Thanks guys for sharing.

Could these solutions be merged back into master?

@pereorga

yes, @mckramer fix works fine, tested latest versions of IE, firefox, chrome, safari and opera

@fat
Bootstrap member

Hey @zerkms,

Thanks for opening this issue! Unfotunately, it looks like it fails to pass the tests neccessary for submitting to bootstrap. The following tests are currently failing:

  • should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

@fat fat closed this Jul 22, 2012
@thbar

Could the issue remain open so we can track that maybe? It took me a bit of effort to figure out this, I suspect it will be the same for others.

@rymohr

Has a solution to this issue been accepted yet? I'm running into the same problem but I'm using the bootstrap-sass gem to vendor bootstrap into a rails project. Simply tweaking the bootstrap-typeahead.js source isn't a great solution in this case.

@zerkms

@islandr: there are 2 working solutions in the thread.

@fat:

I'm confused that this bug has been closed because of

should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

It's reproducible on demo-page. Any reason to waste time and create an example on jsfiddle?

@rymohr

@zerkms: clearly, but has either solution been integrated into the official repo and scheduled for release?

@zerkms

@islandr: nope, and I doubt it will from this topic. I think we just need to follow the bureaucracy and create another ticket with reproducible jsfiddle :-S

@krainboltgreene

This issue hit me as well, and I'm using the downloaded version of the js.

Why was this issue closed?

@raphaelsaunier

@fat: The issue still persists in v2.1.0 on Chrome 21.0.1180.89.

@sequethin

Same here - if I release the click fast, it works, if I hold the mouse for a fraction of a second too long, I get no selection.

@clintonb

Thanks, @mckramer !

@ilyabo

Thanks mckramer! The patch worked for me too.

@kevlawrence

Thanks @zerkms and @mckramer!

@fat I created a jsfiddle example here - http://jsfiddle.net/NVD8K/

@jasny jasny added a commit to jasny/bootstrap that referenced this issue Nov 7, 2012
@jasny jasny Added typeahead functionality
 * AJAX search
 * Convert select to typeahead
 * Use value objects as search
 * Customizable dropdown
 * Min-width menu typeahead
 * Fixed click typeahead menu (see twbs/bootstrap#2715) as suggested by @mckramer

Padding 2px for select
34648bb
@cvrebert cvrebert locked and limited conversation to collaborators Jun 9, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.