Comatibility issue with Django-autocomplete-light. Clear button not appearing.

I don't know if this is select2-bootstrap-5-theme issue or django-autocomplete-light (DAL) issue so apologies in advance if it's unrelated.

I'm using select2 through DAL and applying this packages as select2 theme. As described here

autocomplete.ModelSelect2(
    url='<View url>',
    attrs={
        'data-theme': 'bootstrap-5',
        'data-allow-clear': True
    },
)

Theming works fine but clear button doesn't appear (In both RTL and LTR mode. I'm developing a RTL website). If I remove 'data-theme', the button appears. I tried to set theme via JS, but no success. I checked the resulted Html and saw that <button> tag isn't even in generated Html so it's more likely DAL issue, but I don't have the required skill to debug it further.

Steps to reproduce: I created a sample repository. Just execute runserver command and go to default route

Apologies for the (rather late!) response! I've been a bit busy recently unfortunately. I've taken a look at the issue and there's a couple things I've managed to figure out. I don't really know anything about python myself so, bear with me!

In your views file (https://github.com/Alireza-Farahani/selec2-BS5-DAL/blob/main/app/views.py) on line 19, the allow clear option needs to be 'data-allow-clear': 'true' instead of 'data-allow-clear': True. Having the value as True instead of 'true' causes the allow clear functionality to not work, probably something in Select2.

The other thing I noticed seemed to somewhat be caused by django-autocomplete-light itself. It seems that when it renders the form into the page, it also includes the scripts and stylesheets for itself and select2:

This is causing some issues with the cascading of styles as this theme is meant to be included AFTER select2, meaning some of the overrides aren't working including the placement of the clear cross.

If you replace the template file you're using with the following, it seems to sort out the styling correctly:

{% load static %}
{% load i18n %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_current_language as LANGUAGE_CODE %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"
      {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Select2-BS5-DAL</title>
  <link rel="shortcut icon" type="image/png" href="{% static 'media/favicon.ico' %}"/>
  <script crossorigin="anonymous" src="{% static 'js/jquery.min.js' %}"></script>
  {{ form.media }}
  {% if LANGUAGE_BIDI %} {# RTL lang #}
    <link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/bootstrap.rtl.min.css' %}">
    <link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/select2-bootstrap-5-theme.rtl.min.css' %}">
  {% else %}
    <link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" crossorigin="anonymous" href="{% static 'css/select2-bootstrap-5-theme.min.css' %}">
  {% endif %}
  <script crossorigin="anonymous" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</head>

<body>
<form class="p-3" action="/dummy" method="get">
  {{ form.as_p }}
</form>
</body>
</html>

Hope this helps!

apalfrey / select2-bootstrap-5-theme

Comatibility issue with Django-autocomplete-light. Clear button not appearing. #70