title: Bootstrap Multiselect scroll bar drag doesn't work in Bootstrap Modal
body: <p>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. </p>
  
  <p>Normal scrolling works fine but dragging the scrollbar in the modal closes the drop-down. Any way to fix this issue?</p>
  
  <p><a href="https://jsfiddle.net/darshanturakhia/hdnf9x61/5/" rel="nofollow noreferrer">JSFiddle Link</a></p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;select id="example-multiple-selected1" multiple="multiple"&gt;
    &lt;option value="1"&gt;Option 1&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;Option 2&lt;/option&gt;
    &lt;!-- Option 3 will be selected in advance ... --&gt;
    &lt;option value="3" selected="selected"&gt;Option 3&lt;/option&gt;
    &lt;option value="4"&gt;Option 4&lt;/option&gt;
    &lt;option value="5"&gt;Option 5&lt;/option&gt;
    &lt;option value="6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;select id="example-multiple-selected" multiple="multiple"&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2" selected="selected"&gt;Option 2&lt;/option&gt;
            &lt;!-- Option 3 will be selected in advance ... --&gt;
            &lt;option value="3" selected="selected"&gt;Option 3&lt;/option&gt;
            &lt;option value="4"&gt;Option 4&lt;/option&gt;
            &lt;option value="5"&gt;Option 5&lt;/option&gt;
            &lt;option value="6"&gt;Option 6&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#example-multiple-selected').multiselect({
            maxHeight: 100
      });
      $('#example-multiple-selected1').multiselect({
            maxHeight: 100
      });
  &lt;/script&gt;
  </code></pre>