Selectize dropdown selection outside of bootstrap modal window causes the modal to close #1689
Comments
|
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 |
risadams
added
pending review
|
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. |
Issue #1689, change selectize behavior to work inside modals.
I did:
(or gave a link to a demo on the Selectize docs)
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.
The text was updated successfully, but these errors were encountered: