Cant click scroll bar in Chrome (windows / mac)

[ChrisMcKee]

Steps to reproduce:

• Enter Country,
• when the list of countries appears try to click the buttons in the scroll bar
• Box disappears making it impossible to scroll with the mouse

[lukasztyrala]

Same problem for me.

[jashkenas]

Hmm. I wonder if this is a jQuery.autocomplete bug.

[mgcrea]

Any news / possible fix on this issue?

[juherpin]

I made a test with jquery.autocomplete only and there's no bug.

[ChetanGoti]

still not fixed after 10 months ?

[ChrisMcKee]

Bug still exists. Tested using the demo http://documentcloud.github.com/visualsearch/#demo If you type country, enter, the country list appears; try to drag the scroll down (rather than say using a mouse wheel)

Chrome 18.0.1025.168 m Win7 x64

[tphalp]

Bug still there. I tested it the same way that ChrisMcKee did. Any drop-down that requires a scrollbar exhibits the behavior, it seems.

Chrome 22.0.1229.79 m Win7 x64

[mgmorcos]

Presents in Chrome on Ubuntu as well.

Ubuntu 12.04, Google Chrome 21.0.1180.89

[jaygooby]

Also same problem in Safari 5.1.7 OS X 10.7.5

[samuelclay]

Upgraded to latest jQuery UI and I can now successfully use the scroll bar.

[belenos12345]

It seems there was a problem with jQuery. That has been fixed. But actually I'm having the scrollbar problem with IE. I'm using the latest jQuery / UI / etc. versions. Even the VisualSearch demo shows the bug in IE. Is there any work around?

[wildstyle007]

@belenos12345 -- please see my temporary workaround for IE in issue #132

[iksnimak]

Hi, WildStyle69, I tried your fixing code, but it doesn't work for me. Maybe I understood wrongly where to put changes. Can you support a full code of modified version of visualsearch.js ?

I tried something like this:

                        ...
            this.box.autocomplete({
                source    : _.bind(this.autocompleteValues, this),
                minLength : 0,
                delay     : 0,
                autoFocus : true,
                position  : {offset : "0 5"},
                create    : _.bind(function(e, ui) {
                    $(this.el).find('.ui-autocomplete-input').css('z-index','auto');
                }, this),
                select    : _.bind(function(e, ui) {
                    e.preventDefault();
                    var originalValue = this.model.get('value');
                    this.set(ui.item.value);
                    if (originalValue != ui.item.value || this.box.val() != ui.item.value) {
                        if (this.app.options.autosearch) {
                            this.search(e);
                        } else {
                            this.app.searchBox.renderFacets();
                            this.app.searchBox.focusNextFacet(this, 1, {viewPosition: this.options.order});
                        }
                    }
                    return false;
                }, this),
                open      : _.bind(function(e, ui) {
                    var box = this.box;
                    this.box.autocomplete('widget').find('.ui-menu-item').each(function() {
                        var $value = $(this),
                            autoCompleteData = $value.data('item.autocomplete') || $value.data('ui-autocomplete-item');

                        if (autoCompleteData['value'] == box.val() && box.data('ui-autocomplete').menu.activate) {
                            box.data('ui-autocomplete').menu.activate(new $.Event("mouseover"), $value);
                        }
                    });
                    // part 1 of extracode
                    this.box.autocomplete('widget').on({
                        mouseover: function () {
                            $(box).data('uiwidgetfocused', true);
                        },
                        mouseout: function () {
                            $(box).data('uiwidgetfocused', false);
                        }
                    });
                    // end part 1 of extracode
                }, this)
            });
            // part 2 of extracode
            var $box = this.box;
            var originalClose = $(this.box).data("ui-autocomplete").close;
            $(this.box).data("ui-autocomplete").close = function (event) {
                var uiwidgetfocused = $($box).data('uiwidgetfocused');
                if ((uiwidgetfocused === undefined) || !uiwidgetfocused) {
                    originalClose.apply(this, arguments);
                }
            }; 
            // end part 2 of extracode
            ...

[sunflowerlab]

Any update on this bug?