Scrolling options list

[djrees]

Hey,

Thanks for the plugin, it's really useful :)

When setting a height on the .options unordered list, the scroll bars show and everything looks good - but trying to use the scroll bars cause the .option to be dismissed.

Its working fine in Chrome & Firefox, but it's broken on Safari (desktop) and IE7-10.

Any idea's why this might be happening?

Thanks!

[seanwash]

Hello @djrees,

I'm trying to replicate the issue that you're having and I haven't had any luck. Can you explain a little more about the problem you're running into, or setup a jsfiddle to demonstrate the issue? Maybe even a screenshot / screencast would be great!

[djrees]

Hey @seanwash - I've setup a codepen that shows this in action.

[seanwash]

Hey @djrees, are you referring to trying to grab the scroll bar with the mouse and drag the scroll bar itself up and down vs. using a trackpad or mouse wheel?

[djrees]

Yes, sorry - I should have been more explicit.

Clicking the scroll bar to trying to drag it up or down causes the .options ul to hide.

[d34dman]

Yes, i can confirm the bug. When clicking on "scrollbar" of the in a long option list, it hides the option list as if you clicked somewhere outside.

[zoerooney]

Noticing this, too. Any thoughts on a fix, anyone?

[paulstraw]

I've got something in the works, just haven't had a chance to finish it up yet. Stay tuned!

[rawksteady]

I've noticed that it works just fine until you actually scroll the page. If you haven't scrolled when touching the scollbars inside the dropdown it works just fine. As soon as you have scrolled anywhere, no matter how little, it breaks. Hope this helps.

[MarcusSublime]

I can also confirm this bug and I'm really looking forward to a fix. I tried some workarounds but concluded the bug was to heavy to be easily fixed

[d34dman]

@rawksteady , i am able to reproduce the error without scrolling anywhere else. Tested it on google chrome.

[br2br]

The problem is with Blur event. It fires when you trying to click on scrollbar, because select input loosing focus.

Quick solution:

1. var isiOS, settings; CHANGE TO: var isiOS, settings, clicked = false;

trigger.on('close', function() {
    trigger.removeClass('open');
    return options.removeClass('open');
});

CHANGE TO:

trigger.on('close', function() {
    var parent = sel.parent();
    if(!parent.is(':hover') || (parent.is(':hover') && clicked)) {
        clicked = false;
        trigger.removeClass('open');
        return options.removeClass('open');
    }
});
sel.parent().on('mouseout', function() {
    sel.trigger('focus');
});

options.on('click', 'li', function(e) {
    options.find('.selected').removeClass('selected');
    $(e.currentTarget).addClass('selected');
    return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus');
});

CHANGE TO:

options.on('click', 'li', function(e) {
    options.find('.selected').removeClass('selected');
    $(e.currentTarget).addClass('selected');
    clicked = true; 
    return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus');
});

[paulstraw]

@br2br IIRC, something similar to this method caused a bunch of Android problems. If you can submit a pull request with the changes in the coffee file, I can take a look though.

EDIT: Also, dude. You can use ``` code fences to get highlighting and formatting. I updated your comment for you.

[br2br]

Sorry, but I'm not using github and don't know how to pull request.

P.S. thanks for formating!

[rawksteady]

@br2br Thank you for the snippets, will work for me nicely until this is properly fixed!

[0vidiu]

Thanks for the solution! It saved me a lot of time, rather than trying to figure things out for myself.

[typoworx-de]

Hello,

has the updated code above seeming to solve the scrollbar-issue been pushed to the GIT version yet?

[markadrake]

I can confirm that I too have this issue - a scrollbar appears for the dropdown list, and using the mousewheel I can scroll to the correct option. However, using the scrollbar by clicking on it causes the dropdown menu to disappear. Ths is in the latest stable release of Google Chrome on Windows 7.

[rdourado]

This is not fixed yet, right?

[rdourado]

I fixed like this, but I don't know if it's a good solution:

options.on 'scroll', ->
    trigger.addClass 'open'
    options.addClass 'open'
    sel.focus()

[andreas-stricker]

i have tried the updated fancySelect.js The click on the scrollbar works, but if the user clicks outside the selectbox, the options stay opened. so on a page with 3 selectboxes and you click all three they all stay opened. how to solve this?

[vdecree]

@strigga See: https://github.com/octopuscreative/FancySelect/issues/37 - This worked for me, using the updated script file and changing the line as @luismata mentions. I can now use multiple fancy selects on a single page and only one will open at any one time. Addtionally the scrolling issue is fixed (or so it seems from testing so far)