Removed django select2

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/settings/django.py

@@ -48,7 +48,6 @@
     "tinymce",
     "django_tables2",
     "django_filters",
-    "django_select2",
     "hypha.addressfield",
     "django_nh3",
     "django_fsm",

hypha/static_src/javascript/submission-filters.js

@@ -21,33 +21,6 @@
     $(".js-toggle-filters").text("Clear filters");
   }
 
-  // Add active class to filters - dropdowns are dynamically appended to the dom,
-  // so we have to listen for the event higher up
-  $("body").on("click", ".select2-dropdown", (e) => {
-    // get the id of the dropdown
-    let selectId = e.target.parentElement.parentElement.id;
-
-    // find the matching dropdown
-    let match = $(`.select2-selection[aria-owns="${selectId}"]`);
-
-    if (match.length !== 0) {
-      // if the dropdown contains a clear class, the filters are active
-      if ($(match[0]).find("span.select2-selection__clear").length !== 0) {
-        match[0].classList.add(filterActiveClass);
-      } else {
-        match[0].classList.remove(filterActiveClass);
-      }
-    }
-  });
-
-  // remove active class on clearing select2
-  $(".select2").on("select2:unselecting", (e) => {
-    const dropdown = e.target.nextElementSibling.firstChild.firstChild;
-    if (dropdown.classList.contains(filterActiveClass)) {
-      dropdown.classList.remove(filterActiveClass);
-    }
-  });
-
   // toggle filters
   $toggleButton.on("click", (e) => {
     // find the nearest filters
@@ -95,67 +68,11 @@
     }
   }
 
-  /**
-   * Corrects spacing of dropdowns when toggled on mobile.
-   * @param {object} element - element to adjust padding for
-   */
-  function mobileFilterPadding(element) {
-    const expanded = "expanded-filter-element";
-    const dropdown = $(element).closest(".select2");
-    const openDropdown = $(".select2 ." + expanded);
-    let dropdownMargin = 0;
-
-    if (
-      openDropdown.length > 0 &&
-      !openDropdown.hasClass("select2-container--open")
-    ) {
-      // reset the margin of the select we previously worked
-      openDropdown.removeClass(expanded);
-      // store the offset to adjust the new select box (elements above the old dropdown unaffected)
-      if (dropdown.position().top > openDropdown.position().top) {
-        dropdownMargin = parseInt(openDropdown.css("marginBottom"));
-      }
-      openDropdown.css("margin-bottom", "0px");
-    }
-
-    if (dropdown.hasClass("select2-container--open")) {
-      dropdown.addClass(expanded);
-      const dropdownID = $(element)
-        .closest(".select2-selection")
-        .attr("aria-owns");
-      // Element which has the height of the select dropdown
-      const match = $(`ul#${dropdownID}`);
-      const dropdownHeight = match.outerHeight(true);
-
-      // Element which has the position of the dropdown
-      const positionalMatch = match.closest(".select2-container");
-
-      // Pad the bottom of the select box
-      dropdown.css("margin-bottom", `${dropdownHeight}px`);
-
-      // bump up the dropdown options by height of closed elements
-      positionalMatch.css(
-        "top",
-        positionalMatch.position().top - dropdownMargin
-      );
-    }
-  }
-
   // clear all filters
   $clearButton.on("click", () => {
     const dropdowns = document.querySelectorAll(".form__filters select");
     dropdowns.forEach((dropdown) => {
       $(dropdown).val(null).trigger("change");
-      $(".select2-selection.is-active").removeClass(filterActiveClass);
-      mobileFilterPadding(dropdown);
-    });
-  });
-
-  $(function () {
-    // Add active class to select2 checkboxes after page has been filtered
-    const clearButtons = document.querySelectorAll(".select2-selection__clear");
-    clearButtons.forEach((clearButton) => {
-      clearButton.parentElement.parentElement.classList.add(filterActiveClass);
     });
   });
 
@@ -168,11 +85,6 @@
 
         // update filter button text
         $(".js-toggle-filters").text("Filters");
-
-        // Correct spacing of dropdowns when toggled
-        $(".select2").on("click", (e) => {
-          mobileFilterPadding(e.target);
-        });
       } else {
         $(".filters").addClass("filters-open");
       }

hypha/static_src/sass/abstracts/_variables.scss

@@ -103,6 +103,3 @@ $breakpoints: (
     "xl" "(min-width: 1280px)",
     "2xl" "(min-width: 1536px)"
 );
-
-// Filters
-$filter-dropdown: ".select2 .select2-selection.select2-selection--single";

hypha/static_src/sass/components/_form.scss

@@ -157,21 +157,6 @@
     }
 
     &__filters {
-        #{variables.$filter-dropdown} {
-            border: 0;
-            border-block-start: 1px solid variables.$color--mid-grey;
-
-            &.is-active {
-                font-weight: variables.$weight--normal;
-                background-color: variables.$color--light-blue-90;
-                border-color: variables.$color--mid-grey;
-            }
-
-            @include mixins.media-query(lg) {
-                border: 1px solid variables.$color--mid-grey;
-            }
-        }
-
         @include mixins.media-query(lg) {
             display: flex;
             align-items: flex-start;