crispy should render form.media after the form as default

[nerdoc]

• Package version: django-crispy-forms 1.14.0, crispy-bootstrap5 0.7
• Django version: 4.1
• Python version: 3.10
• Template pack: bootstrap5

Description:

Crispy renders the form's Media before the form in the HTML. is this correct and helpful?

I can mostly imagine cases where first the HTML tags are added in the DOM (e.g. via HTMX), and afterwords the js code should be executed, because it searches the DOM for some ids or classes and puts some event listeners onto them.

Demo code (simplified):

<button class=" decrease-time-button"> + </button>
<input type="time" id="{{ field.id_for_label }}" step="{{ step }}" data-units="{{ units }}" value="{{ field.value }}" class="form-control"/>
<button class="increase-time-button" type="button"> - </button>

document.querySelectorAll(".increase-time-button").forEach((element) =>  {
    element.addEventListener('click', increaseTime);
  })

In the default setting, where crispy renders Media before the form, document.querySelectorAll(".increase-time-button") finds nothing.
When I write

{% crispy form %}
{{ form.media }}

everything works as intended.

So I suppose it would be better to put it after the form.

Does anything speak against that?

[smithdc1]

Does anything speak against that?

Mainly the fact that it's been like this for a quite some time, it was originally introduced 9 years ago.

560171a

I know very little about JavaScript so I can't really comment on one approach over the other. However, the fact that it's been like that for this long makes me believe folk will be relying on the current configuration.

The form template is fairly small, so one suggestion could be to use a custom template and set it using the template attribute on the FormHelper.
https://django-crispy-forms.readthedocs.io/en/latest/form_helper.html#helper-attributes-you-can-set