An invalid form control with name='' is not focusable.

[alvarolloret]

Hello,

I've been working with DRF HTML & Forms. I've encountered an issue while playing with it, and I was wondering if that has already happened before.

The issue is related to this topic in Stack Overflow. Basically I'm capable of rendering the form with the prepopulated data, but when it comes to send the PATCH request to update. I get this:

An invalid form control with name='name' is not focusable.
An invalid form control with name='jobTitle' is not focusable.
An invalid form control with name='salary' is not focusable.

Here my requirements.txt:

Django REST Framework

djangorestframework==3.12.4 # https://github.com/encode/django-rest-framework
django-cors-headers==3.10.0 # https://github.com/adamchainz/django-cors-headers
django==3.2.9

Here is my view.py:

class UserRetrieveUpdateView(RetrieveUpdateAPIView):
    renderer_classes = [TemplateHTMLRenderer]
    permission_classes = [IsAuthenticated]
    template_name = "users/modals/user_modal_update.html"
    queryset = UserPie.objects.all()
    serializer_class = UserPieSerializer
    lookup_url_kwarg = "user_pk"

    def get(self, request, user_pk):
        user = get_object_or_404(UserPie, pk=user_pk)
        serializer = self.get_serializer(user)
        return Response({"serializer": serializer, "user": user})

Here is my template:

{% load static %}
{% load rest_framework %}

<div class="modal fade" id="userFormModalUpdate" tabindex="-1" aria-labelledby="userFormModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userFormModalLabel">Update existing user</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formUser" action="{% url 'users:form' user_pk=user.pk %}" method="patch">
                    {% csrf_token %}
                    {% render_form serializer %}
                </form>
            </div>
            <div class="modal-footer d-flex justify-content-center ">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" type="submit" form="formUser">Save changes</button>
            </div>
        </div>
    </div>
</div>

Do you guys know what could be the issue?

Thanks in advance :)