Google Chrome: Focus issue with the scrollbar

Answer 1

Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...

Answer 2

I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?

Answer 3

Earlier also I faced such situation and this is what I have been doing.

$('html').click(function() { hasFocus = 0; hideResults(); });

and on the input field i will do this

$('input').click() { event.stopPropagation();

}

So this will close the drop down if clicked anywhere outside the div (even the scrollbar). But I thought if someone could provide a more logical solution.

Answer 4

Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.

Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:

<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
  <div id="dropdown_rows">
    <span>row 1</span>
    <span>row 2</span>
    <span>row 2</span>
  </div>
</div>

"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:

search_ctrl.onfocus = function() {
  search_has_focus = true
}

search_ctrl.onblur = function() {
  search_has_focus = false
  if (!keep_focus) {
    // hide dropdown
  } else {
    keep_focus = false;
    search_ctrl.focus();
  }
}

dropdow_wrap.onclick = function() {
  if (isChrome()) {
    keep_focus = search_has_focus;
  }
}

That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.

You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.

P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.

Answer 5

instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!