Select with Search not working in Modal Dialogs

Topic: Select with Search not working in Modal Dialogs

jseird pro premium priority asked a year ago

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

<!-- 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 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>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
        <button type="button" class="btn btn-primary">Save changes</button>

jseird pro premium priority answered a year 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'?


tommyw pro premium priority answered a year ago

On the select tag, add data-mdb-container="#xxxModal" where xxxModal is the id of your modal.

Grzegorz Bujański staff answered a year ago

Thanks for reporting this bug. We will fix it as soon as possible.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • 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