Формы Django Crispy с помощью Tailwind CSS 4.0: в форме появляется нежелательное направленное вниз курсор

Я использую:

  • Django 5.2.1
  • Попутный ветер CSS 4.0
  • хрустящий попутный ветер 1.0.3
  • джанго-хрустящие формы 2.4

Я использую пакет шаблонов Tailwind, который определен в моем settings.py. Когда я отрисовываю свою форму в моем шаблоне 'concert_form.html', используя crispy-forms, после одного из полей в середине формы появляется большой перевернутый символ курсора. Если я закомментирую crispy-forms, то форма отобразится должным образом. Используя инструменты разработчика, с активными crispy-forms я вижу, что в коде появилось новое значение с определением svg. Которого нет при неактивных crispy-forms. Единственный CSS, который я использую, - это то, что генерируется командой tailwind --watch. Могу ли я каким-либо образом контролировать хрустящие формы, чтобы этого не произошло?

Вот соответствующие разделы кода: concert_form.html 

html
{% extends "_base.html" %}
{% load tailwind_filters %}
...
<div class="bg-white rounded-lg shadow-lg p-6">
  <form method="post" class="space-y-6">
  {% csrf_token %}
  {% form|crispy %}

<div class="flex justify-end space-x-3 pt-4">
... the balance of the code, navigation buttons to 'Cancel' or 'Submit' the form

models.py 

python
from django.db import models
from django.urls import reverse

class ConcertForm(forms.ModelForm):
    name = models.CharField(max_length=100)
    date = models.DateField()
    time = models.TimeField()
    venue = models.ForeignKey(Venue, on_delete=models.CASCADE)
    conductor = models.ManyToManyField(Conductor, blank=True)
    guests = models.ManyToManyField(Guest, blank=True)
    description = models.TextField(blank=True)
    poster = models.ImageField(
        upload_to="posters/",
        blank=True,
        null=True,
    )

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse("concert_detail", args=[str(self.id)])

    class Meta:
        ordering = ["date"]

forms.py 

from django import forms
from .models import Concert

class ConcertForm(forms.ModelForm):
    class Meta:
        model = Concert
        fields = "__all__"
        widgets = {
            "date": forms.DateInput(attrs={"type": "date"}),
            "time": forms.TimeInput(attrs={"type": "time"}),
            "conductor": forms.SelectMultiple(),
            "guests": forms.SelectMultiple(),
        }

settings.py 

python
...
INSTALLED_APPS = [
    ...
    "crispy_forms",
    "crispy_tailwind",
]

CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
CRIPSY_TEMPLATE_PACK = "tailwind"

Отрисованный HTML-код для проблемной области

<select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="venue" id="id_venue" required=""> 
<option value="">---------</option> 
<option value="1" selected="">East Lansing High School</option> 
<option value="2">Lansing Eastern High School</option> </select>

(NOTE: The code below is the <div> inserted with crispy-forms is active)

<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path> 
</svg> 
</div>

Скриншот: Screenshot of the section from the rendered page

Я попытался удалить crispy-forms из файла, из-за чего страница отображается нормально, но без форматирования crispy-forms. Я проверил отрисованную страницу в инструментах разработчика. "Каре" получается только при активном приготовлении хрустящих формочек.

Таким образом, курсор должен быть выровнен по относительно родительского элемента, и его размер должен быть уменьшен относительно этого родительского элемента.

Вот исходный элемент каретки: ./tailwind/layout/select.html #L16-L18, вот исходный элемент каретки, в котором также можно найти относительный родительский элемент.

Родительский элемент <div class="relative">...</div>, который заключает в себе как элементы <select>, так и элементы <svg>, отсутствует в вопросе. Если бы эта оболочка присутствовала, относительный класс мог бы функционировать неправильно или, возможно, был бы переопределен.

Примечание: Этот проект все еще находится на ранней стадии разработки.

В версии 1.0.3 также были исправлены случайные закрывающие теги <div>. Возможно, что подобный случайный закрывающий тег приводит к закрытию родительского элемента без дочерних элементов, и в результате элементы <select> и <svg> вставляются в DOM отдельно, не группируясь вместе.

<div class="relative"></div>

<select>...</select>
<!-- As a result, the caret aligned and sized with absolute is not positioned relative to the direct parent of the <select>, but rather to the <form> or an even more distant ancestor -->
<div class="pointer-events-none absolute ...">
  <svg><path d="..."></path></svg> 
</div>

Ожидается:

<div class="relative">
  <select>...</select>
  <!-- Now it is aligned relative to the parent div.relative -->
  <div class="pointer-events-none absolute ...">
    <svg><path d="..."></path></svg> 
  </div>
</div>
Вернуться на верх