Topic: form select field does not close in modal
Hi there,
I have a select form in a modal. When that select form has a lot of options and requires a scroll bar, it does not close onselect (that is, when you select an option). Basically, the user clicks on the select control, and then selects an option. Once they select the option, the select dropdown stays open. This issue only occurs inside the modal. You can use the following code to test:
<a class="btn-lg " href="#" role="button" data-toggle="modal" data-target="#modalAddressEdit">
open modal
</a>
<div class="modal fade" id="modalAddressEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body mx-3 px-4">
<form id="modalAddressInfo">
<div class="row justify-content-lg-center ">
<div class="col-12">
<div class="row">
<div class="md-form col-sm-12">
<select size="1" name="COUNTRY" class="mdb-select" id="COUNTRY">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua And Barbuda">Antigua And Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
</select>
<label for="COUNTRY">
Country
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$('.mdb-select').material_select();
</script>
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No