Topic: Select filter in modal

stefangregg priority asked 2 years 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 2 years ago

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

Keep coding,  Mikołaj from MDB

stefangregg priority commented 2 years ago

Yes, I managed to sort it out. Thanks

geraelem priority commented 1 year 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

  • ForumUser: 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