From ed2ed1ac6e18387c1bbbd8f2da49bd9040f7cf02 Mon Sep 17 00:00:00 2001
From: Colin Dawson <me@cjdawson.com>
Date: Sat, 14 Feb 2026 17:04:07 +0000
Subject: [PATCH] Swapped out the select multi implemenation to a dedicated
 checklist control.

---
 src/Sass/checklist.scss             | 20 ++++++++++++
 src/Sass/global.scss                |  1 +
 src/components/common/Checklist.tsx | 47 +++++++++++++++++++++++++++++
 src/components/common/Input.tsx     | 26 ++++------------
 4 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 src/Sass/checklist.scss
 create mode 100644 src/components/common/Checklist.tsx

diff --git a/src/Sass/checklist.scss b/src/Sass/checklist.scss
new file mode 100644
index 0000000..43dcace
--- /dev/null
+++ b/src/Sass/checklist.scss
@@ -0,0 +1,20 @@
+.checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px;
+  border-radius: 4px;
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.checklist-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+}
diff --git a/src/Sass/global.scss b/src/Sass/global.scss
index df7d32a..7279b35 100644
--- a/src/Sass/global.scss
+++ b/src/Sass/global.scss
@@ -30,6 +30,7 @@
 @import "./_errorLogs.scss";
 @import "./addTaskButton.scss";
 @import "./selectableList.scss";
+@import "./checklist.scss";
 
 //Changes needed to make MS Edge behave the same as other browsers
 input::-ms-reveal {
diff --git a/src/components/common/Checklist.tsx b/src/components/common/Checklist.tsx
new file mode 100644
index 0000000..78ff4e2
--- /dev/null
+++ b/src/components/common/Checklist.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+export interface ChecklistOption {
+  value: string;
+  label: string;
+}
+
+interface ChecklistProps {
+  value: string[];
+  options: ChecklistOption[];
+  onChange: (newValue: string[]) => void;
+  disabled?: boolean;
+}
+
+export const Checklist: React.FC<ChecklistProps> = ({
+  value,
+  options,
+  onChange,
+  disabled = false,
+}) => {
+  const toggle = (val: string) => {
+    const exists = value.includes(val);
+    const newValue = exists ? value.filter((v) => v !== val) : [...value, val];
+
+    onChange(newValue);
+  };
+
+  return (
+    <div className="checklist">
+      {options.map((opt) => {
+        const checked = value.includes(opt.value);
+
+        return (
+          <label key={opt.value} className="checklist-item">
+            <input
+              type="checkbox"
+              checked={checked}
+              disabled={disabled}
+              onChange={() => toggle(opt.value)}
+            />
+            <span>{opt.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index bb27340..fc14e05 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -3,6 +3,7 @@ import "../../Sass/_forms.scss";
 import ErrorBlock from "./ErrorBlock";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { Checklist } from "./Checklist";
 
 export enum InputType {
   button = "button",
@@ -134,32 +135,17 @@ function Input(props: InputProps) {
 
         {/* MULTISELECT */}
         {type === InputType.multiselect && (
-          <select
-            id={name}
-            className={className}
-            name={name}
-            multiple
-            disabled={readOnly}
+          <Checklist
             value={(value as string[]) ?? []}
-            onChange={(e) => {
-              const selected = Array.from(e.target.selectedOptions).map(
-                (opt) => opt.value,
-              );
+            options={options ?? []}
+            onChange={(selectedOptions) => {
               onChange?.({
-                ...e,
                 target: {
-                  ...e.target,
-                  value: selected,
+                  value: selectedOptions,
                 },
               } as any);
             }}
-          >
-            {options?.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
+          />
         )}
 
         {/* ALL OTHER INPUT TYPES */}