Select with Search not working in Modal Dialogs


Topic: Select with Search not working in Modal Dialogs

jseird pro premium priority asked 4 months 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
</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>

jseird pro premium priority answered 4 months 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 months ago

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


tommyw pro premium priority answered 4 months ago

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


Please insert min. 20 characters.
Status

Answered

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
Tags