From afd7f5e8583b2e8ef261d6f07c711bc5c0bbc5dd Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 1 Sep 2026 18:32:29 +0200
Subject: [PATCH 1/5] Make category question widget render select input if more
 than 32 options for both single and multiselect fields.

---
 hypha/apply/categories/blocks.py      | 31 ++++++++++++++++-----------
 hypha/apply/funds/forms.py            |  6 +++---
 hypha/apply/funds/tables.py           |  4 ++--
 hypha/apply/funds/widgets.py          | 14 +++++++++---
 hypha/apply/projects/forms/invoice.py |  4 ++--
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/hypha/apply/categories/blocks.py b/hypha/apply/categories/blocks.py
index 9eb4731505..9f9c1a05cb 100644
--- a/hypha/apply/categories/blocks.py
+++ b/hypha/apply/categories/blocks.py
@@ -1,4 +1,5 @@
 from django import forms
+from django.db.models import BLANK_CHOICE_DASH
 from django.utils.functional import cached_property
 from django.utils.translation import gettext_lazy as _
 from wagtail.blocks import (
@@ -9,8 +10,13 @@
 )
 from wagtail.coreutils import resolve_model_string
 
+from hypha.apply.funds.widgets import ChoicesSelectMultipleWidget, ChoicesSelectWidget
 from hypha.apply.stream_forms.blocks import OptionalFormFieldBlock
 
+# Above this many options a radio/checkbox list stops being usable, so fall back
+# to a searchable Choices.js select.
+SEARCHABLE_SELECT_THRESHOLD = 32
+
 
 class ModelChooserBlock(ChoiceBlock):
     # Implement this block as it's referenced in the old migrations.
@@ -65,23 +71,24 @@ def get_field_kwargs(self, struct_value):
         kwargs = super().get_field_kwargs(struct_value)
         category = self.get_instance(id=struct_value["category"])
         kwargs = self.use_defaults_from_category(kwargs, category)
-        choices = category.options.values_list("id", "value")
+        choices = list(category.options.values_list("id", "value"))
+        if not struct_value["multi"] and len(choices) >= SEARCHABLE_SELECT_THRESHOLD:
+            # A <select> auto-selects its first option, so offer an empty one.
+            choices.insert(0, BLANK_CHOICE_DASH[0])
         kwargs.update({"choices": choices})
         return kwargs
 
     def get_widget(self, struct_value):
+        category = self.get_instance(id=struct_value["category"])
+        # Pick widget according to number of options to maintain good usability.
+        many_options = category.options.count() >= SEARCHABLE_SELECT_THRESHOLD
         if struct_value["multi"]:
-            category = self.get_instance(id=struct_value["category"])
-            category_size = category.options.count()
-            # Pick widget according to number of options to maintain good usability.
-            if category_size < 32:
-                return forms.CheckboxSelectMultiple
-            else:
-                from hypha.apply.funds.tables import MultiCheckboxesWidget
-
-                return MultiCheckboxesWidget
-        else:
-            return forms.RadioSelect
+            return (
+                ChoicesSelectMultipleWidget
+                if many_options
+                else forms.CheckboxSelectMultiple
+            )
+        return ChoicesSelectWidget if many_options else forms.RadioSelect
 
     def prepare_data(self, value, data, serialize):
         if not data:
diff --git a/hypha/apply/funds/forms.py b/hypha/apply/funds/forms.py
index 6fbb2f3701..3e4d26e2bc 100644
--- a/hypha/apply/funds/forms.py
+++ b/hypha/apply/funds/forms.py
@@ -23,7 +23,7 @@
 from .models.co_applicants import CoApplicantProjectPermission, CoApplicantRole
 from .permissions import can_change_external_reviewers
 from .utils import model_form_initial, render_icon
-from .widgets import MultiCheckboxesWidget
+from .widgets import ChoicesSelectMultipleWidget
 
 
 class ApplicationSubmissionModelForm(forms.ModelForm):
@@ -239,7 +239,7 @@ class BatchUpdateReviewersForm(forms.Form):
     )
     external_reviewers = forms.ModelMultipleChoiceField(
         queryset=User.objects.reviewers().only("pk", "full_name"),
-        widget=MultiCheckboxesWidget(attrs={"data-placeholder": _("Select...")}),
+        widget=ChoicesSelectMultipleWidget(attrs={"data-placeholder": _("Select...")}),
         label=_("External Reviewers"),
         required=False,
     )
@@ -386,7 +386,7 @@ def __init__(self, *args, choices_groupby, **kwargs):
 class UpdateMetaTermsForm(ApplicationSubmissionModelForm):
     meta_terms = GroupedModelMultipleChoiceField(
         queryset=None,  # updated in init method
-        widget=MultiCheckboxesWidget(attrs={"data-placeholder": _("Select...")}),
+        widget=ChoicesSelectMultipleWidget(attrs={"data-placeholder": _("Select...")}),
         label=_("Tags"),
         choices_groupby="get_parent",
         required=False,
diff --git a/hypha/apply/funds/tables.py b/hypha/apply/funds/tables.py
index d189e3d58c..19ac3452d1 100644
--- a/hypha/apply/funds/tables.py
+++ b/hypha/apply/funds/tables.py
@@ -21,7 +21,7 @@
 from hypha.core.tables import RelativeTimeColumn
 
 from .models import ApplicationSubmission, Round, ScreeningStatus
-from .widgets import MultiCheckboxesWidget
+from .widgets import ChoicesSelectMultipleWidget
 from .workflows import STATUS_SLUGS, STATUSES
 
 User = get_user_model()
@@ -192,7 +192,7 @@ class MultiCheckboxesMixin(filters.Filter):
     def __init__(self, *args, **kwargs):
         label = kwargs.get("label")
         kwargs.setdefault(
-            "widget", MultiCheckboxesWidget(attrs={"data-placeholder": label})
+            "widget", ChoicesSelectMultipleWidget(attrs={"data-placeholder": label})
         )
         super().__init__(*args, **kwargs)
 
diff --git a/hypha/apply/funds/widgets.py b/hypha/apply/funds/widgets.py
index 4fbe82f358..7d0540ee65 100644
--- a/hypha/apply/funds/widgets.py
+++ b/hypha/apply/funds/widgets.py
@@ -1,15 +1,23 @@
 from django import forms
 
 
-class MultiCheckboxesWidget(forms.SelectMultiple):
+class ChoicesJSMixin:
     """
-    Custom widget for Choices.js. Adds the required attributes.
+    Adds the attributes required to initialise Choices.js on a select.
     """
 
     def __init__(self, *args, **kwargs):
         attrs = kwargs.get("attrs", {})
-        # Add the date attribute for Choices.js initialization
+        # Add the data attributes for Choices.js initialization
         attrs.setdefault("data-js-choices", "")
         attrs.setdefault("data-placeholder", "")
         kwargs["attrs"] = attrs
         super().__init__(*args, **kwargs)
+
+
+class ChoicesSelectWidget(ChoicesJSMixin, forms.Select):
+    pass
+
+
+class ChoicesSelectMultipleWidget(ChoicesJSMixin, forms.SelectMultiple):
+    pass
diff --git a/hypha/apply/projects/forms/invoice.py b/hypha/apply/projects/forms/invoice.py
index 872c12e62e..8c93cb4fd1 100644
--- a/hypha/apply/projects/forms/invoice.py
+++ b/hypha/apply/projects/forms/invoice.py
@@ -8,7 +8,7 @@
 from django.utils.translation import gettext_lazy as _
 from django_file_form.forms import FileFormMixin
 
-from hypha.apply.funds.widgets import MultiCheckboxesWidget
+from hypha.apply.funds.widgets import ChoicesSelectMultipleWidget
 from hypha.apply.stream_forms.fields import MultiFileField, SingleFileField
 
 from ..models.invoice import (
@@ -233,7 +233,7 @@ def clean_invoices(self):
 class InvoiceTagsForm(forms.ModelForm):
     tags = forms.ModelMultipleChoiceField(
         queryset=InvoiceTag.objects.all(),
-        widget=MultiCheckboxesWidget,
+        widget=ChoicesSelectMultipleWidget,
         required=False,
         label=_("Tags"),
     )

From 3e3acf4550999951ce9bdb6aee1b4d63f40645e1 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 7 Sep 2026 11:20:40 +0200
Subject: [PATCH 2/5] Handle required select fields that we use choices.js on.

---
 hypha/apply/categories/blocks.py        | 29 +++++++++++++++----------
 hypha/apply/funds/models/submissions.py |  3 +++
 hypha/apply/funds/widgets.py            | 13 +++++++----
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/hypha/apply/categories/blocks.py b/hypha/apply/categories/blocks.py
index 9f9c1a05cb..4140866a0c 100644
--- a/hypha/apply/categories/blocks.py
+++ b/hypha/apply/categories/blocks.py
@@ -67,28 +67,33 @@ def use_defaults_from_category(self, kwargs, category):
 
         return kwargs
 
+    def widget_for_choices(self, struct_value, choices):
+        # Pick widget according to number of options to maintain good usability.
+        many_options = len(choices) >= SEARCHABLE_SELECT_THRESHOLD
+        if struct_value["multi"]:
+            return (
+                ChoicesSelectMultipleWidget
+                if many_options
+                else forms.CheckboxSelectMultiple
+            )
+        return ChoicesSelectWidget if many_options else forms.RadioSelect
+
     def get_field_kwargs(self, struct_value):
         kwargs = super().get_field_kwargs(struct_value)
         category = self.get_instance(id=struct_value["category"])
         kwargs = self.use_defaults_from_category(kwargs, category)
         choices = list(category.options.values_list("id", "value"))
-        if not struct_value["multi"] and len(choices) >= SEARCHABLE_SELECT_THRESHOLD:
+        widget = self.widget_for_choices(struct_value, choices)
+        if widget is ChoicesSelectWidget:
             # A <select> auto-selects its first option, so offer an empty one.
             choices.insert(0, BLANK_CHOICE_DASH[0])
-        kwargs.update({"choices": choices})
+        kwargs.update({"choices": choices, "widget": widget})
         return kwargs
 
     def get_widget(self, struct_value):
-        category = self.get_instance(id=struct_value["category"])
-        # Pick widget according to number of options to maintain good usability.
-        many_options = category.options.count() >= SEARCHABLE_SELECT_THRESHOLD
-        if struct_value["multi"]:
-            return (
-                ChoicesSelectMultipleWidget
-                if many_options
-                else forms.CheckboxSelectMultiple
-            )
-        return ChoicesSelectWidget if many_options else forms.RadioSelect
+        # The widget depends on the number of options, which `get_field_kwargs`
+        # already has to hand. Let it set the widget rather than query again.
+        return None
 
     def prepare_data(self, value, data, serialize):
         if not data:
diff --git a/hypha/apply/funds/models/submissions.py b/hypha/apply/funds/models/submissions.py
index 8cf67a6a65..a3bc515e4d 100644
--- a/hypha/apply/funds/models/submissions.py
+++ b/hypha/apply/funds/models/submissions.py
@@ -1225,6 +1225,9 @@ def from_submission(
             if isinstance(field.block, CategoryQuestionBlock) and (
                 category_option_ids := submission.form_data.get(field.id)
             ):
+                # Single select answers are stored as a bare id, not a list.
+                if isinstance(category_option_ids, str):
+                    category_option_ids = [category_option_ids]
                 anonymized.selected_category_options.add(
                     *Option.objects.filter(id__in=category_option_ids)
                 )
diff --git a/hypha/apply/funds/widgets.py b/hypha/apply/funds/widgets.py
index 7d0540ee65..1c3bf1bc08 100644
--- a/hypha/apply/funds/widgets.py
+++ b/hypha/apply/funds/widgets.py
@@ -6,13 +6,18 @@ class ChoicesJSMixin:
     Adds the attributes required to initialise Choices.js on a select.
     """
 
-    def __init__(self, *args, **kwargs):
-        attrs = kwargs.get("attrs", {})
+    def __init__(self, attrs=None, *args, **kwargs):
+        attrs = dict(attrs) if attrs else {}
         # Add the data attributes for Choices.js initialization
         attrs.setdefault("data-js-choices", "")
         attrs.setdefault("data-placeholder", "")
-        kwargs["attrs"] = attrs
-        super().__init__(*args, **kwargs)
+        super().__init__(attrs, *args, **kwargs)
+
+    def use_required_attribute(self, initial):
+        # Choices.js conceals the underlying <select>, and browsers refuse to
+        # submit a form with a hidden required control, without showing the user
+        # an error. Required is still enforced server side by the form field.
+        return False
 
 
 class ChoicesSelectWidget(ChoicesJSMixin, forms.Select):

From 547733195cb064bc65c5d1864e6d932bc30491c0 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 7 Sep 2026 11:21:07 +0200
Subject: [PATCH 3/5] Fix bug in submission form copy.

---
 .../static_src/javascript/submission-form-copy.js  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/hypha/static_src/javascript/submission-form-copy.js b/hypha/static_src/javascript/submission-form-copy.js
index 5ba159f85f..d0d7ddd0b8 100644
--- a/hypha/static_src/javascript/submission-form-copy.js
+++ b/hypha/static_src/javascript/submission-form-copy.js
@@ -49,6 +49,9 @@
           }
 
           const listItems = el.querySelectorAll(".form__list > li");
+          // Read the select before any input: Choices.js conceals the select
+          // and adds an always empty search input in front of it.
+          const selectEl = el.querySelector("select");
           const inputEl = el.querySelector("input");
           const richTextEl = el.querySelector(".tinymce4-editor");
 
@@ -60,6 +63,17 @@
               return text;
             });
             questionText += "\n\n" + itemTexts.join("\n");
+          } else if (selectEl) {
+            const selected = Array.from(selectEl.selectedOptions)
+              .filter(function (option) {
+                return option.value;
+              })
+              .map(function (option) {
+                return option.textContent.trim();
+              });
+            if (selected.length) {
+              questionText += "\n\n" + selected.join("\n");
+            }
           } else if (inputEl && inputEl.value) {
             questionText += "\n\n" + strip(inputEl.value);
           } else if (richTextEl && richTextEl.value) {

From 5e054b5db42fbd4edffe837904cb650e6c82a89e Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 7 Sep 2026 11:21:42 +0200
Subject: [PATCH 4/5] Fix issue in form-group-toggle.js with required
 choices.js fields.

---
 .../javascript/form-group-toggle.js           | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/hypha/static_src/javascript/form-group-toggle.js b/hypha/static_src/javascript/form-group-toggle.js
index bc9edd6c84..3ae297839f 100644
--- a/hypha/static_src/javascript/form-group-toggle.js
+++ b/hypha/static_src/javascript/form-group-toggle.js
@@ -16,6 +16,16 @@
     return wrapper;
   }
 
+  /**
+   * Fields that can carry the `required` attribute.
+   *
+   * Choices.js controls are skipped: it conceals the original select and adds
+   * an always empty search input, either of which would block submission if
+   * marked required. Those fields are enforced server side instead.
+   */
+  const REQUIRABLE_FIELDS =
+    "input:not([type='hidden']):not(.choices__input), select:not([data-choice]), textarea";
+
   /**
    * Add or remove `required` on form inputs within a group element.
    * Uses `data-required="True"` on each fieldset to know which fields
@@ -26,11 +36,9 @@
       wrapper
         .querySelectorAll("[data-required='True']")
         .forEach(function (fieldset) {
-          fieldset
-            .querySelectorAll("input:not([type='hidden']), select, textarea")
-            .forEach(function (el) {
-              el.setAttribute("required", "");
-            });
+          fieldset.querySelectorAll(REQUIRABLE_FIELDS).forEach(function (el) {
+            el.setAttribute("required", "");
+          });
           const labelSpan = fieldset.querySelector(".form__question span");
           if (labelSpan && !labelSpan.querySelector("sup")) {
             const sup = document.createElement("sup");
@@ -39,11 +47,9 @@
           }
         });
     } else {
-      wrapper
-        .querySelectorAll("input:not([type='hidden']), select, textarea")
-        .forEach(function (el) {
-          el.removeAttribute("required");
-        });
+      wrapper.querySelectorAll(REQUIRABLE_FIELDS).forEach(function (el) {
+        el.removeAttribute("required");
+      });
       wrapper
         .querySelectorAll(".form__question span sup")
         .forEach(function (sup) {

From 4a6dba94b973b0fb06b6f98d4f1fa83581d5dc2c Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 7 Sep 2026 11:47:49 +0200
Subject: [PATCH 5/5] Mark invalid checkbox and radiofields red.

---
 hypha/static_src/sass/components/_form.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss
index aff352e2c6..ddebf5959a 100644
--- a/hypha/static_src/sass/components/_form.scss
+++ b/hypha/static_src/sass/components/_form.scss
@@ -78,6 +78,18 @@
     input[type="datetime-local"] {
       --input-color: var(--color-error);
     }
+
+    // Choices.js conceals the <select>, so mark up the box it renders instead.
+    // stylelint-disable-next-line selector-class-pattern
+    .choices__inner {
+      border-color: var(--color-error);
+    }
+
+    // Radio and checkbox groups have no single element to outline, so flag the
+    // error on their legend.
+    legend {
+      color: var(--color-error);
+    }
   }
 
   &__error-text {