Swapped out the select multi implemenation to a dedicated checklist control.

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;
+  }
+}

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 {

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>
+  );
+};

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
+          <Checklist
-            id={name}
-            className={className}
-            name={name}
-            multiple
-            disabled={readOnly}
             value={(value as string[]) ?? []}
-            onChange={(e) => {
+            options={options ?? []}
-              const selected = Array.from(e.target.selectedOptions).map(
+            onChange={(selectedOptions) => {
-                (opt) => opt.value,
-              );
               onChange?.({
-                ...e,
                 target: {
-                  ...e.target,
+                  value: selectedOptions,
-                  value: selected,
                 },
               } as any);
             }}
-          >
+          />
-            {options?.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
         )}
 
         {/* ALL OTHER INPUT TYPES */}