Select filter in modal


Topic: Select filter in modal

stefangregg pro premium priority asked 2 months ago

Hia,

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.

Thanks!

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> 
</select>
<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 -->
        </div>
    </div>
</div>

Expected behavior

enter image description here

Actual behavior

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


Mikołaj Smoleński staff commented 2 months ago

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

Keep coding,  Mikołaj from MDB


stefangregg pro premium priority commented 2 months ago

Yes, I managed to sort it out. Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • 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
Tags