Topic: Select filter in modal

stefangregg priority asked 10 months ago


I am having some issues with select filtering.

On a regular page the select filter seems to work correctly.It allows us to type in the input box and filters the options.

However, when placed in a modal, it doesn't allow us to type or click that box; aka no filtering.

Upon copying to a snippet it doesn't seem to have the same behavior leading me to believe its some issue I have created myself. In addition a lot of my page uses ajax to pull things in so a lot harder to replicate.

Any ideas on what to check would be greatly appreciated! Im really quite stuck on what to do.


The select code itself is as follows:

<select class="select form-control-lg" required name="country" data-mdb-filter="true" data-mdb-validation="true" data-mdb-valid-feedback=" " data-mdb-container=".modal" data-mdb-invalid-feedback=" " data-mdb-option-height="50">
    <option value="">Select...</option>
    <option value="Country1">Country1</option> 
    <option value="Country2">Country2</option> 
    <option value="Country3">Country3</option> 
<label class="form-label select-label">Country*</label>

The basic modal code is as follows:

<div class="modal fade" id="addaccount_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
      <div class="modal-content">
        <div class="modal-body">
           <!-- form here -->

Expected behavior

enter image description here

Actual behavior

enter image description hereResources (screenshots, code snippets etc.)

Mikołaj Smoleński staff commented 10 months ago

Is the issue resolved (according to the status of the ticket)?

Keep coding,  Mikołaj from MDB

stefangregg priority commented 10 months ago

Yes, I managed to sort it out. Thanks

geraelem priority commented 3 weeks ago

Hello Stefan! how yo solved it? I have the same issue. Thanks in advance.

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: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.20.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No