fixes #1635: focus the contact form field on open (#1665)

* fix #1635: focus modal autofocus fields

* fix selector & add autofocus to message field

* feat: rewrite without jquery, as typescript

* use indentation of 4 spaces

* change _ to -

evap/evaluation/templates/base.html

@@ -70,6 +70,7 @@
 
         <script type="module" src="{% static 'js/csrf-utils.js' %}"></script>
 
+        <script type="module" src="{% static 'js/base-template.js' %}"></script>
         <script type="text/javascript">
             activateTooltips = function(selector = "") {
                 var tooltipTriggerList = [].slice.call(document.querySelectorAll(selector + ' [data-bs-toggle="tooltip"]'))

evap/evaluation/templates/contact_modal.html

@@ -32,7 +32,7 @@
                     </div>
                     <div class="mb-3">
                         <label for="{{ modal_id }}MessageText" class="control-label">{% trans 'Message' %}:</label>
-                        <textarea class="form-control" id="{{ modal_id }}MessageText" style="resize:vertical;min-height:150px;"></textarea>
+                        <textarea autofocus class="form-control" id="{{ modal_id }}MessageText" style="resize:vertical;min-height:150px;"></textarea>
                     </div>
                 </div>
                 <div class="modal-footer">

evap/static/ts/src/base-template.ts

+// This file contains all typescript code for the base.html template.
+
+// Fix autofocus on bootstrap modals -> Focus the first element with `autofocus` attribute
+document.addEventListener("shown.bs.modal", (e) => {
+    if (!e.target) return;
+    const modalEl = e.target as HTMLElement;
+    const autofocusEl = modalEl.querySelector("[autofocus]") as HTMLElement;
+    if (autofocusEl) {
+        autofocusEl.focus();
+    }
+});