Scrollbar drag doesn't work in Bootstrap Modal

[dturakhia]

I'm trying to use bootstrap multi-select in a bootstrap modal. I'm able to initialize it and render it perfectly no issues with that. I'm facing a really annoying issue wherein when I try to drag the scrollbar inside the modal the drop down closes. I tried and replicated the same code outside the bootstrap modal, it works perfectly. I've created the jsFiddle to demonstrate the issue.

Normal scrolling works fine but dragging the scrollbar in the modal closes the drop-down. Any way to fix this issue?

https://jsfiddle.net/darshanturakhia/hdnf9x61/5/

[davidstutz]

Seems to be a bug. But I am not sure what the problem might be ... It might also be an issue with Bootstrap's Dropdown or Modal as the problem seems to be the click event, i.e. clicking on the scroll bar closes the dropdown.

[jjjhanreyyy]

Any news on this issue @davidstutz ?

[dturakhia]

Hey, I kinda figured out that it was a bootstrap modal issue. When I removed

tabindex="-1"

from

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

I was able to drag the scrollbar.

[franklhlc]

I have this behaviour of dropdown closing when trying to drag scroll bar , but not within a bs modal , just on an asp page. I've narrowed it down to the ul link css property , -ms-overflow-y: auto; if I edit the html (not the dom) within IE's debug console, to make that tag just overflow-y: auto (removing -ms-) it works perfectly well, up and down. The page works fine without tweaks in Chrome. Scroll wheel works in either just fine. I've tried every sort of manipulation , jquery, ondropdownshown, changing the ul template within the bms pluging code (btw, 9.15 v) , nothing different, Only the editing directly of the html withing ie's debug window fixes it'. So it looks like MS -ms-overflow-y is the culprit. Unfortunately, I'm not sure how to keep their browsers from preventing to change overflow-y to -ms-overflow-y automatically it seems when page gets rendered.

[franklhlc]

To be exactly precise about effect in IE 11 , tried all sorts of various css configurations using ul template and commenting out the overflow-y: auto in the initialization, but no change. The effect in IE that makes dropdown dissapear is when you hold the left key down on either the up or down arrows of vertical scroll bar, of drag the scroll bar, so in effect, holding the left key down , however, clicking in each area and on buttons , and you can scroll vertically, also along with using mouse wheel. I have a div with content that overflows farther down the same page, with a -ms-overflow-y: scroll setting and that works fine doing the same scrolling effects. That is a non-jquery and plug section of the page though. Wonder if jquery hooks in into windows id scrolling , somehow.

[franklhlc]

To end today's dissertation on this problem within IE, I should pass along, that finally I wrapped the

tag with a div tag with overflow-y: auto, and this did scroll the list correctly in IE. then put back the 2 classes, multiselect-container and dropdown-menu, and this is where it didn't scroll upon draggin scrollbar, as before, so this does indeed look like a bs 4 problem, if not before, which I will try on an earlier version of bs and jQuery when I have some more time . I'll report back any findings.

[tiesont]

@franklhlc Bootstrap 4 (if you're using the compiled version) uses Autoprefixer, which adds those vendor overrides. If you compile the Sass yourself, problem probably goes away.

[franklhlc]

@tiesont thanks for this direction, I will have to try. That I did run my tests that I outlined I would above. I wanted to see that if the scrollbar drag and closing of the dropdown (in IE only) was specific to a any certain combination of BS and jQ. So, Swapping the 4.1.3 BS/CSS compiled for 3.3.7 BS/CSS …. allowed the scrolling to work again. it didn't matter if I used jQuery version 2.2.4 or the latest 3.3.7 . And once again . However just like before, all combinations worked properly in Chrome.

So we have a very specific problem in the BS 4.1.3 js for IE only …. that's what this boils down too. Once again, if I edit the html and replace the -ms-overflow-y on the ul tag with , overflow-y (eliminating the browser prefix) (which I think would be akin to the innerHTML) in IE f12 , the scrolling works again beautifully.
When I try to do a replace of this string with some jq in the onDropdownShown event , it (something, not sure what) puts back the -ms- prefix on the this style property. The 3.3.7 bs and jq 2.1.4 also put that style attribute for the ul tag , but yet, the control scrolls properly when using those versions of the frameworks.

[franklhlc]

just checked the difference of what bs 4.1.3 adds in way of inline css in <ul class="multi-select …> tag (I set max-height in constructor to 200)

that makes it not scroll in IE as opposed to bs 3.3.7 which allows BSM to scroll properly

if I take out the transform , it scrolls fine , without modifying -ms-overflow-y tag at all, however then the list box moves up over the button , with top aligning with the top of button.

Will try to recompile bs4 without -ms tags as I don't want to mess with the transforms in jquery and it probably won't let me anyway.

[franklhlc]

sorry,left out encoding symbols so the markup didn't get put in last comment ..
4.1.3 ul tag (IE scroll does not work)

ul class="multiselect-container dropdown-menu show" style="left: 0px; top: 0px; position: absolute; -ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 200px; transform: translate3d(5px, 34px, 0px);" x-placement="bottom-start"

the 3.3.7 bs does allow scrollbar to work properly for
`ul class="multiselect-container dropdown-menu" style="-ms-overflow-x: hidden; -ms-overflow-y: auto; max-height: 200px;'

`

[tiesont]

Well, anything to do with dropdowns or popups (like tooltips, popovers, or the modals) uses Popper.js, so it's possible that is your culprit (it's the most significant change between v3 and v4). It does seem like Popper has some utilities for adding vendor-prefixed rules.