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

Actual behavior

Resources (screenshots, code snippets etc.)