Формы 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. Я проверил отрисованную страницу в инструментах разработчика. "Каре" получается только при активном приготовлении хрустящих формочек.

So the caret should be aligned to a relatively positioned parent, and it should be sized down relative to that parent.

Here is the source caret element: ./tailwind/layout/select.html #L16-L18, here is the source caret element, where the relative parent can also be found.

The parent <div class="relative">...</div> that wraps both the <select> and the <svg> elements is missing from the question. If that wrapper were present, the relative class might be functioning incorrectly or possibly being overridden.

Note: This project is still in its early stages of development.

In v1.0.3, stray closing <div> tags were also fixed. It's possible that a similar stray closing tag is causing the relative parent to close without any children, and as a result, the <select> and <svg> elements are being inserted into the DOM separately, without being grouped together.

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

Expected:

<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>
Вернуться на верх