Topic: Select with Search not working in Modal Dialogs
Expected behavior Select field with search to work when used in a fullscreen modal dialog
Actual behavior Select field could be initialized within fullscreen modal dialog, but the search field is not focusable, neither per mouse or keyboard. The search input field is displayed but not usable.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
<div class="modal-dialog modal-fullscreen ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...
<select class="select" data-mdb-filter="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
tommyw pro premium priority answered 4 years ago
On the select tag, add data-mdb-container="#xxxModal" where xxxModal is the id of your modal.
jseird pro premium priority answered 4 years ago
Hi there,
alle my last bugs were answered that way - but until now nothing happened. Some of them date back months and are crucial to user interaction (also for other MDB users though). Just for planning: What timeline can users here expect from 'Fix it as soon as possible'?
Thanks
Grzegorz Bujański staff answered 4 years ago
Coenie Janse van Rensburg pro premium priority answered 2 years ago
yet 2 years has gone and the bug is still not fixed!!
kpienkowska staff commented 2 years ago
This was already fixed:
https://mdbootstrap.com/snippets/standard/kpienkowska/5144658
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: all
- Browser: safari
- OS: macOS / ios
- Provided sample code: No
- Provided link: No