Scrolling options list about fancyselect HOT 21 OPEN

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!

from fancyselect.

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

from fancyselect.

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?

from fancyselect.

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.

from fancyselect.

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.

from fancyselect.

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

from fancyselect.

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

from fancyselect.

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.

from fancyselect.

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

from fancyselect.

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

from fancyselect.

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');
});

from fancyselect.

@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.

from fancyselect.

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

P.S. thanks for formating!

from fancyselect.

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

from fancyselect.

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

from fancyselect.

Hello,

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

from fancyselect.

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.

from fancyselect.

This is not fixed yet, right?

from fancyselect.

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()

from fancyselect.

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?

from fancyselect.

@strigga See: #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)

from fancyselect.