Select field is not rendered properly if used with snapappointments/bootstrap-select

[bkiziuk]

I am using bootstrap-select:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/js/bootstrap-select.min.js"></script>

with data-live-search feature:

{{ render_field(form.user_id, form_type='horizontal', id='userid', **{'data-live-search': 'true'}) }}

<script>
        $(document).ready(function() {
            $('#userid').selectpicker();
        });
</script>

The result of rendering is:

which does not look good as the working bootstrap-select is embedded in a static and not responsive select.

The generated HTML is:

<div class="dropdown bootstrap-select form-select dropup">
     <select class="form-select" data-live-search="true" id="userid" name="user_id" required="" tabindex="null">
          <option value="1">Admin Admin (admin)</option>
     </select>
     <button type="button" tabindex="-1" class="btn dropdown-toggle btn-light" data-bs-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" title="Admin Admin (admin)" data-id="userid">
          <div class="filter-option">
               <div class="filter-option-inner">
                    <div class="filter-option-inner-inner">Admin Admin</div>
               </div> 
          </div>
     </button>
[...]
</div>