click on scrollbar in ie11 causes dropdown to close

[zezulka000]

click on scrollbar in ie11 causes dropdown to close

[philwig]

Actually this is all of IE, not just IE11.

This is a serious issue, introduced in this current (1.4.1) version. It fails because on IE a blur event is fired when the user clicks the scrollbar. You don't get the blur event for other browsers.

The issue is caused by all IE (except for Edge!) treating the scroll bar as "outside" the element, so it fires the blur event, and that makes this plugin not work.

[Jojoshua]

I cannot use this plugin for the same reason. I figured out that this started breaking at the 1.4.0 version.

[philwig]

;-) The previous one we used. But this is fixable... my mate Ant did it as follows, although he also points out that there is probably a reason they didn't write it this way in the first place, so this may be a bad idea for reasons we don't know. It works fine for our customers though, so far...

Autocomplete: Change the way the suggestions box is closed.. Fixes issues

• Suggestions box closing on IE when scroll bar is clicked due to IE considering scrollbar click a loss of focus (HA-077-66639)
• Timing dependent bugs where box closes due to close handler not being aborted within 200ms

@@ -211,14 +211,14 @@
$(window).on('resize.autocomplete', that.fixPositionCapture);
that.el.on('keydown.autocomplete', function (e) { that.onKeyPress(e); });
that.el.on('keyup.autocomplete', function (e) { that.onKeyUp(e); });
- that.el.on('blur.autocomplete', function () { that.onBlur(); });
+$('body').on('mousedown.autocomplete', function (e) { that.onMouseDown(e); });
that.el.on('focus.autocomplete', function () { that.onFocus(); });
that.el.on('change.autocomplete', function (e) { that.onKeyUp(e); });
that.el.on('input.autocomplete', function (e) { that.onKeyUp(e); });
},
onFocus: function () {
var that = this;

@@ -227,18 +227,20 @@
if (that.el.val().length >= that.options.minChars) {
that.onValueChange();
}
},

    - onBlur: function () {
   + onMouseDown: function (e) {
         var that = this;

   -// If user clicked on a suggestion, hide() will
   -// be canceled, otherwise close suggestions
   -that.blurTimeoutId = setTimeout(function () {
   -that.hide();
   - }, 200);
   +// Ignore clicks inside the input or suggestion boxes (e.g. scroll bar being clicked)
   +if ($(e.target).closest('.autocomplete-suggestions').length > 0 ||
   +$(e.target).closest(that.el).length) {
   +     return;
   + }
   +
   + that.hide();
     },

[Jojoshua]

Thanks, that does seem to work.

[jamesond]

I didn't have any success trying the method above. After scouring the inter webs I found that adding unselectable="on" to .autocomplete-suggestions seemed to solve the issue.

$(".autocomplete-suggestions").attr("unselectable", "on");

[kugijp]

In the above code, if you do not select anything from the list, the container will remain displayed even if you out focus. So, I responded with the following fix-code.

@@ -201,6 +201,11 @@
                 clearTimeout(that.blurTimeoutId);
             })
 
+            container.on('focus.autocomplete', function () {
+                clearTimeout(that.blurTimeoutId);
+                setTimeout(function(){ that.el.focus(); }, 200);
+            })
+
             that.fixPositionCapture = function () {
                 if (that.visible) {
                     that.fixPosition();