Use choices.js code in base.html and updated class to data atrribute …

…for choices initialisation/selection

hypha/apply/dashboard/templates/dashboard/reviewer_dashboard.html

@@ -93,6 +93,4 @@ <h2 class="mb-2 text-xl">
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/forms.py

@@ -398,7 +398,9 @@ def label_from_instance(self, obj):
 class UpdateMetaTermsForm(ApplicationSubmissionModelForm):
     meta_terms = GroupedModelMultipleChoiceField(
         queryset=None,  # updated in init method
-        widget=MetaTermWidget(attrs={"data-placeholder": "Select..."}),
+        widget=MetaTermWidget(
+            attrs={"data-placeholder": "Select...", "data-js-choices": ""}
+        ),
         label=_("Meta terms"),
         choices_groupby="get_parent",
         required=False,

hypha/apply/funds/templates/funds/application_base.html

@@ -91,7 +91,4 @@ <h3>{% blocktrans %}Sorry this {{ page|verbose_name }} is not accepting applicat
         <script src="{% static 'js/form-group-toggle.js' %}"></script>
     {% endif %}
     <script src="{% static 'js/multi-input-fields.js' %}"></script>
-
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/applicationsubmission_form.html

@@ -51,7 +51,4 @@
     {% if not show_all_group_fields %}
         <script src="{% static 'js/form-group-toggle.js' %}"></script>
     {% endif %}
-
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/base_submissions_table.html

@@ -20,6 +20,4 @@
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>
     <script src="{% static 'js/batch-actions.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/includes/update_meta_terms_form.html

@@ -3,18 +3,3 @@
 <div class="p-6">
     {% include 'funds/includes/dialog_form_base.html' with form=form value=value %}
 </div>
-
-<script type="module">
-    {% comment %} Do this here as the select elements for different roles are dynamically generated. {% endcomment %}
-    import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
-
-    const selectElements = document.querySelectorAll('#id_meta_terms');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            removeItemButton: true,
-            allowHTML: true,
-        });
-    });
-</script>

hypha/apply/funds/templates/funds/rounds.html

@@ -23,6 +23,4 @@
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/widgets.py

@@ -8,8 +8,8 @@ class MultiCheckboxesWidget(forms.SelectMultiple):
 
     def __init__(self, *args, **kwargs):
         attrs = kwargs.get("attrs", {})
-        # Add the class for Choices.js initialization
-        attrs.setdefault("class", "js-choices")
+        # Add the date attribute for Choices.js initialization
+        attrs.setdefault("data-js-choices", "")
         attrs.setdefault("data-placeholder", "")
         kwargs["attrs"] = attrs
         super().__init__(*args, **kwargs)

hypha/apply/projects/templates/application_projects/invoice_list.html

@@ -37,6 +37,4 @@
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/batch-actions.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/projects/templates/application_projects/project_approval_form.html

@@ -78,7 +78,4 @@ <h5>{% trans "Proposal attachments" %}</h5>
     {% if not show_all_group_fields %}
         <script src="{% static 'js/form-group-toggle.js' %}"></script>
     {% endif %}
-
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/projects/templates/application_projects/project_list.html

@@ -37,6 +37,4 @@
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/projects/templates/application_projects/project_sow_form.html

@@ -74,7 +74,4 @@ <h5>{% trans "Proposal attachments" %}</h5>
     {% if not show_all_group_fields %}
         <script src="{% static 'js/form-group-toggle.js' %}"></script>
     {% endif %}
-
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/projects/templates/application_projects/report_form.html

@@ -77,6 +77,4 @@
 
 {% block extra_js %}
     <script src="{% static 'js/multi-input-fields.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/projects/templates/application_projects/reporting.html

@@ -33,6 +33,4 @@
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
-    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
-    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/templates/base.html

@@ -123,6 +123,23 @@
         </script>
         <!-- htmx end -->
 
+        <!-- choices select -->
+        <script type="module">
+            import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
+
+            htmx.onLoad(function() {
+                const selectElements = document.querySelectorAll("[data-js-choices]");
+
+                selectElements.forEach((selectElement) => {
+                    new Choices(selectElement, {
+                        shouldSort: false,
+                        allowHTML: true,
+                        removeItemButton: true,
+                    });
+                });
+            });
+        </script>
+
         <!-- Placeholder for the htmx modal & toast -->
         {% include "includes/_modal-placeholder.html" %}
         {% include "includes/_toast-placeholder.html" %}