jquery ui selectmenu scrollbar not working

Question

I use jquery selectmenu plugin. I have initialized select with

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

I have many options and this causes to appear default browser scrollbar, but i cant use it. If I click and try to drag this bar, selectmenu closes. I can scroll with mouse wheel. There might be some conflict in css and various plugins. But im not sure where to start looking.

Any ideas, what might be causing this problem?

Answer 1

It seems to be a problem in this section of the js file:

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

The scrollbar agrees the condition in "if" clause, so selectmenu is closed...

You can comment the line inside "if" clause until someone gives a solution for this bug. This way, the selectmenu won't be closed when you click out of it, but it will be closed when you select any option...

EDIT:

Ok, it's working now. Change the section shown before by this one:

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

This way, as the scrollbar is part of the div with class "ui-selectmenu-menu-dropdown"... selectmenu won't be closed when moving the scrollbar.