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 1: 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 2: I hard-refreshed my browser, and tried a different browser (Firefox), so I think it's not just out-of-date assets.
EDIT 3: I disabled the bootstrap form and used a regular form, and it still has odd behavior, but not as odd.
So the problems with how it looks is likely an interaction between django-autocomplete-light and django-bootstrap5.
I thought that a single select would allow you to type within the text box, but instead it drops down another text box for you to type in. Perhaps this is what is expected out of select2.
The only remaining issue is that in my code, it does not autofocus the cursor into the box when I click, whereas on the select2 site it does.
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:
