Why is django-autocomplete-light single-select badly styled and broken when multi-select is working?

I have a screen in Django with a single-select autocomplete and multi-select autocomplete to the same model object (but different model fields). The multi-select is working perfectly, the single-select is functional, but poorly styled and also slightly broken (takes an extra click to get into the box to type).

Help?

EDIT: If I remove the multi-select box from the form, the single-select is still poorly styled and broken. So, while the multi-select shows something can work, it is likely otherwise unrelated.

EDIT: I hard-refreshed my browser, and tried a different browser (Firefox), so I think it's not just out-of-date assets.

More detail:

• Django 4.1.5

• django-autocomplete-light 3.9.4

• django-bootstrap5 22.2

• generated HTML

multi-select (working):

<span
class="select2-selection
select2-selection--multiple
form-select"
role="combobox"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1"
aria-disabled="false"><ul
class="select2-selection__rendered"><li
class="select2-search
select2-search--inline"><input
class="select2-search__field"
type="search"
tabindex="0"
autocomplete="off"
autocorrect="off"
autocapitalize="none"
spellcheck="false"
role="searchbox"
aria-autocomplete="list"
placeholder="Type
here"
style="width:
288px;"></li></ul></span>

.select2-container .select2-selection--multiple: min-height: 32px

single-select (broken):

<span
class="select2-selection
select2-selection--single
form-select"
role="combobox"
aria-haspopup="true"
aria-expanded="false"
tabindex="0"
aria-disabled="false"
aria-labelledby="select2-id_primary_diagnosis-container"><span
class="select2-selection__rendered"
id="select2-id_primary_diagnosis-container"
role="textbox"
aria-readonly="true"><span
class="select2-selection__placeholder">Type
here</span></span><span
class="select2-selection__arrow"
role="presentation"><b
role="presentation"></b></span></span>

"display:inline prevents height:28px from having an effect"

• In forms.py:

class MyobjForm(forms.Form):
    # NOTE: can't use ModelForm for various reasons not shown
    single_select = forms.ModelChoiceField(
        label='single select',
        queryset=Myobj.objects.all(),
        widget=autocomplete.ModelSelect2(
            url="myobj-autocomplete",
            attrs={
                "data-placeholder": "Type here",
                # Only autocomplete after 1 character has been typed
                "data-minimum-input-length": 1,
            },
        ),
    )
    multi_select = forms.ModelMultipleChoiceField(
        label='multi select',
        queryset=Myobj.objects.all(),
        required=False,
        widget=autocomplete.ModelSelect2Multiple(
            url="myobj-autocomplete",
            attrs={
                "data-placeholder": "Type here",
                # Only autocomplete after 1 character has been typed
                "data-minimum-input-length": 1,
            },
        ),
    )

• In templates:

{% load django_bootstrap5 %}

...

{% block head_script %}
    {# include jquery and the form media to get django-autocomplete-light to work #}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    {{labeledencounter_form.media}}
{% endblock head_script %}

 ...

 {% bootstrap_form myform %}

Template media headers compile to:

    <script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
    <link href="/static/admin/css/vendor/select2/select2.css" media="screen" rel="stylesheet">
<link href="/static/admin/css/autocomplete.css" media="screen" rel="stylesheet">
<link href="/static/autocomplete_light/select2.css" media="screen" rel="stylesheet">
<script src="/static/admin/js/vendor/select2/select2.full.js"></script>
<script src="/static/autocomplete_light/autocomplete_light.js"></script>
<script src="/static/autocomplete_light/select2.js"></script>
<script src="/static/autocomplete_light/i18n/en.js"></script>

...

<label class="form-label" for="id_select_select">single select</label><select name="select_select" data-placeholder="Type here" data-minimum-input-length="1" class="form-select" required id="id_select_select" data-autocomplete-light-language="en" data-autocomplete-light-url="/myobj-autocomplete/" data-autocomplete-light-function="select2">
  <option value="" selected>---------</option>

</select></div><div class="mb-3"><label class="form-label" for="id_multi_select">multi select</label><select name="multi_select" data-placeholder="Type here" data-minimum-input-length="1" class="form-select" id="id_multi_select" data-autocomplete-light-language="en" data-autocomplete-light-url="/myobj-autocomplete/" data-autocomplete-light-function="select2" multiple>

• a few more screenshots:

• functional multi-select open:

• broken single-select open:

• functional multi-select in chrome debugger:

• broken single-select in chrome debugger:

.select2-container .select2-selection--single {
    min-height: 2.5rem;
}