Error adding more fields with django-autocomplete-light

Question

I have a problem and I am using 2 libraries : django-autocomplete-light and django-dynamic-formset. The 2 are very good at doing their job. The first is used to do autocomplete and the second to make django formsets are dynamic. but when you want to join these 2 a problem occurs. Image of the problem

when a new field is created, it is added in that way.

Template:

{% extends 'base/base.html' %}
{% load static %}
{% block titulo%} Registrar venta {%endblock%}
{% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
   {% endblock %}
   {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ detalleformset.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
    </script>   
    {% endblock %}

Is there any way to fix this? I was reading and there is little information

Answer 1

I had the same problem recently using django-autocomplete-light and the django-dynamic-formset plugin together. The solution I found is to move the {{ detalleformset.media }} to before you initialize the formset, i.e. before your opening <form> tag. That solved the problem for me and made it so that those extra unclickable autocomplete fields were no longer created.