selectize.js Selectize dropdown selection outside of bootstrap modal window causes the modal to close

I did:

[x] Search for if my issue has already been submitted
[ ] Make sure I'm reporting something precise that needs to be fixed
[x] Give my issue a descriptive and concise title
[ ] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
[ ] Indicate precise steps to reproduce in numbers and the result, like below

I am using seltectize within a modal window. The problem is, that the dropdown extend beyond the bottom of the modal. Clicking an option beyond the bottom of the modal causes the modal to close. Only solution i found so far is to make the modal static, but that is not the behaviour i want. Is there any possibility to prevent the modal click event from being fired? Or any other solution for this issue?

Thanks a lot.

Oct 25 '21 23:10 NashBridgesAT

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

Jan 24 '22 01:01 github-actions[bot]

Wanting to contribute more detail to this issue. Please consider reopening unless this may be a Firefox bug?

Here is a test file that reproduces this behavior on Firefox. Notice - clicking on a select option that drops outside of the modal will close the modal as Firefox propagates the click event. Chrome works as expected. Notice in the test, that a normal non-selectize select does not close the window. I will dig deeper to see if I can isolate this and submit a PR if possible.


<!DOCTYPE html>
<html>
<head>
<script src='https://wwwqmx-13d4e.kxcdn.com/js/jquery-3.2.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/microplugin/0.0.3/microplugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.5/js/selectize.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sifter/0.5.4/sifter.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.5/css/selectize.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.5/css/selectize.default.css' rel='stylesheet'>
<link href='modal.css' rel='stylesheet'>
<title>Selectize inside a modal</title>
<style>
  body {
      width: 100%;
      margin: 0 auto;
      font-family: Tahoma, Verdana, Arial, sans-serif;
  }
</style>
</head>
<body>
<a href='#modal' rel='modal:open'>Open the Modal</a>
<div>
<div class='modal' id='modal' style='width: 400px; height: 200px;'>
The 2nd select drop down should fall outside of the modal.
Clicking an option outside of the modal window should not close the modal.
This works on Chrome, but not Firefox.
<br>
<select id='without-selectize' name='test' style='width: 100px;'>
<option value='one'>one</option>
<option value='two'>two</option>
<option value='three'>three</option>
<option value='four'>four</option>
<option value='five'>five</option>
<option value='six'>six</option>
<option value='seven'>seven</option>
</select>
<select id='with-selectize' name='test' style='width: 100px; z-index: 2000;'>
<option value='one'>one</option>
<option value='two'>two</option>
<option value='three'>three</option>
<option value='four'>four</option>
<option value='five'>five</option>
<option value='six'>six</option>
<option value='seven'>seven</option>
</select>
</div>
</div>
</body>
<script>
  $("#with-selectize").selectize();
</script>
</html>

One difference in behavior is that the standard select performs the change on mouse up whereas selectize performs the change on mouse down. This leaves the mouse up event to happen outside of the dropdown because the dropdown is closed on mousedown.

Jun 02 '22 18:06 vanboom