Remove select2 and uses choices.js

hypha/apply/categories/blocks.py

@@ -1,7 +1,6 @@
 from django import forms
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
-from django_select2.forms import Select2MultipleWidget
 from wagtail.blocks import BooleanBlock, CharBlock, ChoiceBlock, TextBlock
 from wagtail.coreutils import resolve_model_string
 
@@ -73,7 +72,9 @@ def get_widget(self, struct_value):
             if category_size < 32:
                 return forms.CheckboxSelectMultiple
             else:
-                return Select2MultipleWidget
+                from hypha.apply.funds.tables import MultiCheckboxesWidget
+
+                return MultiCheckboxesWidget
         else:
             return forms.RadioSelect
 

hypha/apply/funds/forms.py

@@ -21,7 +21,7 @@
 )
 from .permissions import can_change_external_reviewers
 from .utils import model_form_initial, render_icon
-from .widgets import MetaTermSelect2Widget, Select2MultiCheckboxesWidget
+from .widgets import MetaTermWidget, MultiCheckboxesWidget
 
 
 class ApplicationSubmissionModelForm(forms.ModelForm):
@@ -234,7 +234,7 @@ class BatchUpdateReviewersForm(forms.Form):
     )
     external_reviewers = forms.ModelMultipleChoiceField(
         queryset=User.objects.reviewers().only("pk", "full_name"),
-        widget=Select2MultiCheckboxesWidget(attrs={"data-placeholder": "Select..."}),
+        widget=MultiCheckboxesWidget(attrs={"data-placeholder": "Select..."}),
         label=_("External Reviewers"),
         required=False,
     )
@@ -398,7 +398,9 @@ def label_from_instance(self, obj):
 class UpdateMetaTermsForm(ApplicationSubmissionModelForm):
     meta_terms = GroupedModelMultipleChoiceField(
         queryset=None,  # updated in init method
-        widget=MetaTermSelect2Widget(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/tables.py

@@ -22,7 +22,7 @@
 from hypha.images.models import CustomImage
 
 from .models import ApplicationSubmission, Round, ScreeningStatus
-from .widgets import Select2MultiCheckboxesWidget
+from .widgets import MultiCheckboxesWidget
 from .workflows import STATUSES, get_review_active_statuses
 
 User = get_user_model()
@@ -290,28 +290,26 @@ def get_meta_terms_from_dataset(dataset):
     ).distinct()
 
 
-class Select2CheckboxWidgetMixin(filters.Filter):
+class MultiCheckboxesMixin(filters.Filter):
     def __init__(self, *args, **kwargs):
         label = kwargs.get("label")
         kwargs.setdefault(
-            "widget", Select2MultiCheckboxesWidget(attrs={"data-placeholder": label})
+            "widget", MultiCheckboxesWidget(attrs={"data-placeholder": label})
         )
         super().__init__(*args, **kwargs)
 
 
-class Select2MultipleChoiceFilter(
-    Select2CheckboxWidgetMixin, filters.MultipleChoiceFilter
-):
+class MultipleChoiceFilter(MultiCheckboxesMixin, filters.MultipleChoiceFilter):
     pass
 
 
-class Select2ModelMultipleChoiceFilter(
-    Select2MultipleChoiceFilter, filters.ModelMultipleChoiceFilter
+class ModelMultipleChoiceFilter(
+    MultipleChoiceFilter, filters.ModelMultipleChoiceFilter
 ):
     pass
 
 
-class StatusMultipleChoiceFilter(Select2MultipleChoiceFilter):
+class StatusMultipleChoiceFilter(MultipleChoiceFilter):
     def __init__(self, limit_to, *args, **kwargs):
         choices = [
             (slugify(name), name)
@@ -337,25 +335,21 @@ def get_filter_predicate(self, v):
 
 
 class SubmissionFilter(filters.FilterSet):
-    fund = Select2ModelMultipleChoiceFilter(
+    fund = ModelMultipleChoiceFilter(
         field_name="page", queryset=get_used_funds, label=_("Funds")
     )
-    round = Select2ModelMultipleChoiceFilter(
-        queryset=get_used_rounds, label=_("Rounds")
-    )
-    lead = Select2ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
-    screening_statuses = Select2ModelMultipleChoiceFilter(
+    round = ModelMultipleChoiceFilter(queryset=get_used_rounds, label=_("Rounds"))
+    lead = ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
+    screening_statuses = ModelMultipleChoiceFilter(
         queryset=get_screening_statuses, label=_("Screening"), null_label=_("No Status")
     )
-    reviewers = Select2ModelMultipleChoiceFilter(
+    reviewers = ModelMultipleChoiceFilter(
         queryset=get_all_reviewers, label=_("Reviewers")
     )
-    category_options = Select2MultipleChoiceFilter(
+    category_options = MultipleChoiceFilter(
         choices=[], label=_("Category"), method="filter_category_options"
     )
-    meta_terms = Select2ModelMultipleChoiceFilter(
-        queryset=get_meta_terms, label=_("Terms")
-    )
+    meta_terms = ModelMultipleChoiceFilter(queryset=get_meta_terms, label=_("Terms"))
 
     class Meta:
         model = ApplicationSubmission
@@ -455,10 +449,8 @@ def filter_archived(self, queryset, name, value):
 
 
 class SubmissionDashboardFilter(filters.FilterSet):
-    round = Select2ModelMultipleChoiceFilter(
-        queryset=get_used_rounds, label=_("Rounds")
-    )
-    fund = Select2ModelMultipleChoiceFilter(
+    round = ModelMultipleChoiceFilter(queryset=get_used_rounds, label=_("Rounds"))
+    fund = ModelMultipleChoiceFilter(
         field_name="page", queryset=get_used_funds, label=_("Funds")
     )
 
@@ -528,7 +520,7 @@ def get_column_class_names(self, classes_set, bound_column):
         return classes_set
 
 
-class ActiveRoundFilter(Select2MultipleChoiceFilter):
+class ActiveRoundFilter(MultipleChoiceFilter):
     def __init__(self, *args, **kwargs):
         super().__init__(
             self,
@@ -548,7 +540,7 @@ def filter(self, qs, value):
             return qs.inactive()
 
 
-class OpenRoundFilter(Select2MultipleChoiceFilter):
+class OpenRoundFilter(MultipleChoiceFilter):
     def __init__(self, *args, **kwargs):
         super().__init__(
             self,
@@ -571,8 +563,8 @@ def filter(self, qs, value):
 
 
 class RoundsFilter(filters.FilterSet):
-    fund = Select2ModelMultipleChoiceFilter(queryset=get_used_funds, label=_("Funds"))
-    lead = Select2ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
+    fund = ModelMultipleChoiceFilter(queryset=get_used_funds, label=_("Funds"))
+    lead = ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
     active = ActiveRoundFilter(label=_("Active"))
     round_state = OpenRoundFilter(label=_("Open"))
 
@@ -601,17 +593,17 @@ class ReviewerLeaderboardFilter(filters.FilterSet):
         field_name="full_name", lookup_expr="icontains", widget=forms.HiddenInput
     )
 
-    reviewer = Select2ModelMultipleChoiceFilter(
+    reviewer = ModelMultipleChoiceFilter(
         field_name="pk",
         label=_("Reviewers"),
         queryset=get_all_reviewers,
     )
-    funds = Select2ModelMultipleChoiceFilter(
+    funds = ModelMultipleChoiceFilter(
         field_name="applicationsubmission__page",
         label=_("Funds"),
         queryset=get_used_funds,
     )
-    rounds = Select2ModelMultipleChoiceFilter(
+    rounds = ModelMultipleChoiceFilter(
         field_name="applicationsubmission__round",
         label=_("Rounds"),
         queryset=get_used_rounds,

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

@@ -97,7 +97,7 @@ <h2 class="mb-2 text-xl">{{ heading }}</h2>
     </div>
 
     <form action="{{ filter_action }}" method="get" class="form form--filters js-filter-form">
-        <ul class="form__filters select2">
+        <ul class="form__filters">
             {{ filter.form.as_ul }}
             <li>
                 <button class="button button--primary" type="submit" value="Filter">{% trans "Filter" %}</button>

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('#metaterms_form select');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            removeItemButton: true,
-            allowHTML: true,
-        });
-    });
-</script>