Select with Search not working in Modal Dialogs


Topic: Select with Search not working in Modal Dialogs

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

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

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


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


Please insert min. 20 characters.

FREE CONSULTATION

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

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