django-autocomplete-light单选样式异常、交互故障求助

我在Django页面中同时使用了针对同一模型对象的单选和多选Autocomplete组件，多选组件运行完全正常，但单选组件存在两个问题：

1. 样式显示不佳
2. 存在轻微故障：需要额外点击才能进入输入框输入

编辑1：移除多选框后，单选框的样式问题和故障仍然存在，说明二者问题无关。

编辑2：已强制刷新浏览器并尝试Firefox，排除了浏览器缓存资源过期的可能性。

编辑3：禁用Bootstrap表单改用普通表单后，异常行为有所减轻，但问题仍未完全解决。

目前判断样式问题大概率是django-autocomplete-light与django-bootstrap5的交互冲突导致。另外，原本以为单选框可以直接输入，实际点击后会弹出新输入框，这应该是Select2的预期行为，现在仅剩点击单选框时光标无法自动聚焦的问题需要解决。

环境与细节信息 #

• Django 4.1.5
• django-autocomplete-light 3.9.4
• django-bootstrap5 22.2

生成的HTML代码 #

正常运行的多选组件：

<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

故障的单选组件：

<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"

表单代码（forms.py） #

class MyobjForm(forms.Form):
    # NOTE: 因未展示的多种原因无法使用ModelForm
    single_select = forms.ModelChoiceField(
        label='single select',
        queryset=Myobj.objects.all(),
        widget=autocomplete.ModelSelect2(
            url="myobj-autocomplete",
            attrs={
                "data-placeholder": "Type here",
                # 输入1个字符后才触发自动补全
                "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",
                # 输入1个字符后才触发自动补全
                "data-minimum-input-length": 1,
            },
        ),
    )

模板代码（templates） #

{% load django_bootstrap5 %}

...

{% block head_script %}
    {# 引入jquery和表单媒体资源，确保django-autocomplete-light正常工作 #}
    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
    {{labeledencounter_form.media}}
{% endblock head_script %}

 ...

 {% bootstrap_form myform %}

模板编译后的媒体头部内容 #

<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>

补充截图 #

• 正常运行的多选框展开状态：
  

• 故障单选框展开状态：
  

• Chrome调试器中正常的多选框：
  

• Chrome调试器中故障的单选框：
  

内容的提问来源于stack exchange，提问作者dfrankow