Topic: Select Form field, doesn't work if searchable inside modal
                  
                  Mejuto
                  free
                  asked 3 years ago
                
When I create a searchable Select field inside Modal the search field doesn't work.
<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-mdb-toggle="modal"
  data-mdb-target="#staticBackdrop"
>
  Launch static backdrop modal
</button>
<!-- Modal -->
<div
  class="modal fade"
  id="staticBackdrop"
  data-mdb-backdrop="static"
  data-mdb-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-mdb-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <div class="row">
                  <div class="col-12">
                    <select class="select" data-mdb-filter="true" name="Field" id="Field">
                      <option value="Value1">Value1</option>
                      <option value="Value2">Value2</option>
                      <option value="Value3">Value3</option>
                      <option value="Value4">Value4</option>
                      <option value="Value5">Value5</option>
                      <option value="Value6">Value6</option>
                    </select>
                    <label class="form-label select-label">Field</label>
                  </div>
                </div>
      </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">Understood</button>
      </div>
    </div>
  </div>
</div>
                      
                        Add comment
                      
                    
                  
                
                      
                      Dawid Wajszczuk
                      staff
                        answered 3 years ago
                    
Hi,
You need to use data-mdb-container="#staticBackdrop" on the select element and it will work fine. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3546491.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
              Answered
Specification of the issue
              - ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.1
- Device: Web
- Browser: Chrome
- OS: Mac
- Provided sample code: No
- Provided link: No