单击拖动时防止关闭引导下拉列表

Question

I got a dropdown with a fancy scroll in it. Fancy Scroll is a really simple library that replaces the default scroll. And just by adding some HTML markup, the scroll works without even having to initialize it using javascript.

After debugging to see what was going on, I found that bootstrap is making my dropdown hide when clicking on the drag.

The event is ' hide.bs.dropdown '.

By now, I have attempted so many things, managed to make it work, but the only problem is, whenever I start dragging, due to the stopPropagation() function, it will keep scrolling nan-stap even though I released the mouse click.

These are a few things I've tried while googling, thing is, none of the solved answers involved this case scenario, having a scrollbar in it:

      $('.dropdown-menu input, .dropdown-menu label, .thumb', element).click(function(e) {
        e.preventDefault();
        e.stopPropagation();
      });

      $('.thumb', element).on('mouseup', function(e) {
         e.preventDefault();
         e.stopImmediatePropagation();
         return false;
      });

      $('.dropdown-menu .scrollbarY', element).click(function(e) {
        e.stopImmediatePropagation();
      });

      $(element).on("hide.bs.dropdown",function(e) {
        e.preventDefault();
        return false;
      });

The behavior I'm looking for is, clicking on the scroll drag (.thumb) wouldn't close the dropdown, but if there's a click on one of the items or away from dropdown, it should close it.

Answer 1

Okay, after a few more hours of struggling, a combination of the tests I made, solved the issue. If anyone encounters the same problem, here's what I did:

(scrollbarY is the draggy parent)

      $('.scrollbarY', element).click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
      });

Hope it works for everyone.