field_class applied two times for field_file

[Alireza-Farahani]

in field.html if field_class property is set, inputs are wrapped in a div with field_css as css attribute:

{% if field_class %}<div class="{{ field_class }}">{% endif %}
    {% if field|is_file %}
        {% include 'bootstrap5/layout/field_file.html' %}
    {% elif field|is_select %}
...

and in field_file.html all thing are wrapped in a div with css class as field_css

<div class="{{ field_class }} mb-2">
...

which results in nested divs with duplicate css like this:

<div class="col-12 col-md-9"> 
    <div class="col-12 col-md-9 mb-2"> 
        <div> <input type="file" name="icon" class="form-control" accept="image/*" id="id_icon"> </div>
    </div>
</div>

Unfortunately this ruins the UI and file input becomes shorter than other fields.

Is this intended? If not, what can I do except overriding field_file.html?

[smithdc1]

Are you suggesting that the field_class should be removed from the field_file.html template? Maybe the whole <div> too?

[Alireza-Farahani]

I did a quick compare between field.html in bootstrap4 and bootrap5 templates and saw this in bootstrap4/field.html:

...
{% elif field|is_file and use_custom_control  %}
    {% include 'bootstrap4/layout/field_file.html' %}
{% else %}
    <div class="{{ field_class }}">
        {% if field|is_select and use_custom_control %}
             {% crispy_field field 'class' 'custom-select' %}
        {% else %}
            {% crispy_field field %}
        {% endif %}
        {% include 'bootstrap4/layout/help_text_and_errors.html' %}
    </div>
...

In contrast to bootstrap5/field.html, it delegates addition of field_css to filed_file.html file.