From c54c992cdce023b3176e8c39757f8431ee0dd70a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 16 Nov 2023 18:03:27 +0100
Subject: [PATCH 01/37] initial layout

---
 .../Form/Elements/FromSelectMany.vue          | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 client/src/components/Form/Elements/FromSelectMany.vue

diff --git a/client/src/components/Form/Elements/FromSelectMany.vue b/client/src/components/Form/Elements/FromSelectMany.vue
new file mode 100644
index 000000000000..123af9fe735f
--- /dev/null
+++ b/client/src/components/Form/Elements/FromSelectMany.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
+import { type PropType, ref } from "vue";
+
+import { useUid } from "@/composables/utils/uid";
+
+library.add(faLongArrowAltLeft, faLongArrowAltRight);
+
+type SelectValue = Record<string, unknown> | string | number | null;
+
+interface SelectOption {
+    label: string;
+    value: SelectValue;
+}
+
+const props = defineProps({
+    id: { type: String, default: useUid("form-select-many-").value },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    optional: {
+        type: Boolean,
+        default: false,
+    },
+    options: {
+        type: Array as PropType<Array<SelectOption>>,
+        required: true,
+    },
+    placeholder: {
+        type: String,
+        default: "Search for options",
+    },
+    value: {
+        type: String as PropType<SelectValue | SelectValue[]>,
+        default: null,
+    },
+});
+
+const _emit = defineEmits<{
+    (e: "input", value: SelectValue | Array<SelectValue>): void;
+}>();
+
+const searchValue = ref("");
+const useRegex = ref(false);
+</script>
+
+<template>
+    <section :id="props.id" class="form-select-many">
+        <BInputGroup>
+            <BFormInput v-model="searchValue" :debounce="300" :placeholder="props.placeholder"></BFormInput>
+
+            <template v-slot:append>
+                <BButton
+                    :variant="useRegex ? 'primary' : 'outline-primary'"
+                    role="switch"
+                    :aria-checked="useRegex"
+                    title="use regex"
+                    @click="useRegex = !useRegex">
+                    .*
+                </BButton>
+            </template>
+        </BInputGroup>
+
+        <div class="options-box border rounded p-2 mt-2">
+            <div class="selection-heading border-right px-2">
+                <span>Unselected</span>
+                <BButton class="selection-button" title="Select all shown" variant="primary">
+                    <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
+                </BButton>
+            </div>
+            <div class="options-list border-right"></div>
+            <div class="selection-heading px-2">
+                <span>Selected</span>
+                <BButton class="selection-button" title="Deselect all shown" variant="primary">
+                    <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
+                </BButton>
+            </div>
+            <div class="options-list"></div>
+        </div>
+    </section>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.options-box {
+    resize: vertical;
+    overflow: hidden;
+    min-height: 200px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
+    grid-auto-flow: column;
+
+    .selection-heading {
+        color: $gray-600;
+        font-weight: bold;
+        display: flex;
+        justify-content: space-between;
+
+        .selection-button {
+            height: 20px;
+            width: 40px;
+            padding: 0;
+            display: grid;
+            place-items: center;
+        }
+    }
+}
+</style>

From 6381e7bd3eb520e58c3517fa38f41afae3d7af29 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 16 Nov 2023 19:03:04 +0100
Subject: [PATCH 02/37] add regex filtering

---
 .../Form/Elements/FromSelectMany.vue          | 69 ++++++++++++++++---
 client/src/composables/filter/filter.d.ts     |  4 +-
 client/src/composables/filter/filter.js       | 22 ++++--
 .../src/composables/filter/filter.worker.js   |  5 +-
 .../src/composables/filter/filterFunction.ts  | 26 ++++++-
 5 files changed, 105 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Form/Elements/FromSelectMany.vue b/client/src/components/Form/Elements/FromSelectMany.vue
index 123af9fe735f..b09b49c03768 100644
--- a/client/src/components/Form/Elements/FromSelectMany.vue
+++ b/client/src/components/Form/Elements/FromSelectMany.vue
@@ -3,8 +3,9 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
-import { type PropType, ref } from "vue";
+import { computed, type PropType, ref } from "vue";
 
+import { useFilterObjectArray } from "@/composables/filter";
 import { useUid } from "@/composables/utils/uid";
 
 library.add(faLongArrowAltLeft, faLongArrowAltRight);
@@ -41,17 +42,61 @@ const props = defineProps({
 });
 
 const _emit = defineEmits<{
-    (e: "input", value: SelectValue | Array<SelectValue>): void;
+    (e: "input", value: Array<SelectValue>): void;
 }>();
 
 const searchValue = ref("");
 const useRegex = ref(false);
+
+const searchRegex = computed(() => {
+    if (useRegex.value) {
+        try {
+            const regex = new RegExp(searchValue.value);
+            return regex;
+        } catch (e) {
+            return null;
+        }
+    } else {
+        return null;
+    }
+});
+
+const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
+const asRegex = computed(() => searchRegex.value !== null);
+const filteredOptions = useFilterObjectArray(props.options, searchValue, ["label"], asRegex);
+
+const highlightedUnselected = ref([]);
+const highlightedSelected = ref([]);
+
+const selectText = computed(() => {
+    if (highlightedUnselected.value.length > 0) {
+        return "Select highlighted";
+    } else if (searchValue.value === "") {
+        return "Select all";
+    } else {
+        return "Select filtered";
+    }
+});
+
+const deselectText = computed(() => {
+    if (highlightedSelected.value.length > 0) {
+        return "Deselect highlighted";
+    } else if (searchValue.value === "") {
+        return "Deselect all";
+    } else {
+        return "Deselect filtered";
+    }
+});
 </script>
 
 <template>
     <section :id="props.id" class="form-select-many">
         <BInputGroup>
-            <BFormInput v-model="searchValue" :debounce="300" :placeholder="props.placeholder"></BFormInput>
+            <BFormInput
+                v-model="searchValue"
+                :state="regexInvalid ? false : undefined"
+                :debounce="300"
+                :placeholder="props.placeholder"></BFormInput>
 
             <template v-slot:append>
                 <BButton
@@ -68,15 +113,21 @@ const useRegex = ref(false);
         <div class="options-box border rounded p-2 mt-2">
             <div class="selection-heading border-right px-2">
                 <span>Unselected</span>
-                <BButton class="selection-button" title="Select all shown" variant="primary">
+                <BButton class="selection-button" :title="selectText" variant="primary">
+                    {{ selectText }}
                     <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
                 </BButton>
             </div>
-            <div class="options-list border-right"></div>
+            <div class="options-list border-right">
+                <div v-for="option in filteredOptions" :key="option.label">
+                    {{ option.label }}
+                </div>
+            </div>
             <div class="selection-heading px-2">
                 <span>Selected</span>
-                <BButton class="selection-button" title="Deselect all shown" variant="primary">
+                <BButton class="selection-button" :title="deselectText" variant="primary">
                     <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
+                    {{ deselectText }}
                 </BButton>
             </div>
             <div class="options-list"></div>
@@ -100,14 +151,12 @@ const useRegex = ref(false);
         color: $gray-600;
         font-weight: bold;
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-between;
 
         .selection-button {
             height: 20px;
-            width: 40px;
-            padding: 0;
-            display: grid;
-            place-items: center;
+            padding: 0 0.5rem;
         }
     }
 }
diff --git a/client/src/composables/filter/filter.d.ts b/client/src/composables/filter/filter.d.ts
index 6efd44fb92d3..f629299ab34d 100644
--- a/client/src/composables/filter/filter.d.ts
+++ b/client/src/composables/filter/filter.d.ts
@@ -7,9 +7,11 @@ import type { Ref } from "vue";
  * @param array array of objects to filter
  * @param filter string to filter by
  * @param objectFields string array of fields to filter by on each object
+ * @param asRegex when true, treats the filter as an regex. defaults to false
  */
 export declare function useFilterObjectArray<O extends object, K extends keyof O>(
     array: MaybeRefOrGetter<Array<O>>,
     filter: MaybeRefOrGetter<string>,
-    objectFields: MaybeRefOrGetter<Array<K>>
+    objectFields: MaybeRefOrGetter<Array<K>>,
+    asRegex: MaybeRefOrGetter<boolean> = false
 ): Ref<O[]>;
diff --git a/client/src/composables/filter/filter.js b/client/src/composables/filter/filter.js
index e908f5d79bf4..a8d7bc2d67de 100644
--- a/client/src/composables/filter/filter.js
+++ b/client/src/composables/filter/filter.js
@@ -1,18 +1,18 @@
-import { resolveUnref } from "@vueuse/core";
+import { toValue } from "@vueuse/core";
 import { onScopeDispose, ref, watch } from "vue";
 
-export function useFilterObjectArray(array, filter, objectFields) {
+export function useFilterObjectArray(array, filter, objectFields, asRegex = false) {
     const worker = new Worker(new URL("./filter.worker.js", import.meta.url));
 
     const filtered = ref([]);
-    filtered.value = resolveUnref(array);
+    filtered.value = toValue(array);
 
     const post = (message) => {
         worker.postMessage(message);
     };
 
     watch(
-        () => resolveUnref(array),
+        () => toValue(array),
         (arr) => {
             post({ type: "setArray", array: arr });
         },
@@ -22,7 +22,7 @@ export function useFilterObjectArray(array, filter, objectFields) {
     );
 
     watch(
-        () => resolveUnref(filter),
+        () => toValue(filter),
         (f) => {
             post({ type: "setFilter", filter: f });
         },
@@ -32,7 +32,7 @@ export function useFilterObjectArray(array, filter, objectFields) {
     );
 
     watch(
-        () => resolveUnref(objectFields),
+        () => toValue(objectFields),
         (fields) => {
             post({ type: "setFields", fields });
         },
@@ -41,6 +41,16 @@ export function useFilterObjectArray(array, filter, objectFields) {
         }
     );
 
+    watch(
+        () => toValue(asRegex),
+        (r) => {
+            post({ type: "setAsRegex", asRegex: r });
+        },
+        {
+            immediate: true,
+        }
+    );
+
     worker.onmessage = (e) => {
         const message = e.data;
 
diff --git a/client/src/composables/filter/filter.worker.js b/client/src/composables/filter/filter.worker.js
index 470bf897de5b..f66134b0db58 100644
--- a/client/src/composables/filter/filter.worker.js
+++ b/client/src/composables/filter/filter.worker.js
@@ -3,6 +3,7 @@ import { runFilter } from "@/composables/filter/filterFunction";
 let array = [];
 let filter = "";
 let fields = [];
+let asRegex = false;
 
 self.addEventListener("message", (e) => {
     const message = e.data;
@@ -13,10 +14,12 @@ self.addEventListener("message", (e) => {
         fields = message.fields;
     } else if (message.type === "setFilter") {
         filter = message.filter;
+    } else if (message.type === "setAsRegex") {
+        asRegex = message.asRegex;
     }
 
     if (array.length > 0 && fields.length > 0) {
-        const filtered = runFilter(filter, array, fields);
+        const filtered = runFilter(filter, array, fields, asRegex);
         self.postMessage({ type: "result", filtered });
     }
 });
diff --git a/client/src/composables/filter/filterFunction.ts b/client/src/composables/filter/filterFunction.ts
index be92ad46b162..480bf43fdabe 100644
--- a/client/src/composables/filter/filterFunction.ts
+++ b/client/src/composables/filter/filterFunction.ts
@@ -1,4 +1,14 @@
-export function runFilter<O extends object, K extends keyof O>(f: string, arr: O[], fields: K[]) {
+export function runFilter<O extends object, K extends keyof O>(f: string, arr: O[], fields: K[], asRegex = false) {
+    let regex: RegExp | null = null;
+
+    if (asRegex) {
+        try {
+            regex = new RegExp(f);
+        } catch (e) {
+            // ignore
+        }
+    }
+
     if (f === "") {
         return arr;
     } else {
@@ -7,11 +17,21 @@ export function runFilter<O extends object, K extends keyof O>(f: string, arr: O
                 const val = obj[field];
 
                 if (typeof val === "string") {
-                    if (val.toLowerCase().includes(f.toLocaleLowerCase())) {
+                    if (regex) {
+                        return val.match(regex);
+                    } else if (val.toLowerCase().includes(f.toLocaleLowerCase())) {
                         return true;
                     }
                 } else if (Array.isArray(val)) {
-                    if (val.includes(f)) {
+                    if (regex) {
+                        return val.some((v) => {
+                            if (typeof v === "string") {
+                                return v.match(regex!);
+                            } else {
+                                return false;
+                            }
+                        });
+                    } else if (val.includes(f)) {
                         return true;
                     }
                 }

From c7bf31a7b29d7733484d220ea4e4ed8f7b196c7d Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:11:16 +0100
Subject: [PATCH 03/37] move to sub-folder

---
 .../Form/Elements/{ => FormSelectMany}/FromSelectMany.vue         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename client/src/components/Form/Elements/{ => FormSelectMany}/FromSelectMany.vue (100%)

diff --git a/client/src/components/Form/Elements/FromSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FromSelectMany.vue
similarity index 100%
rename from client/src/components/Form/Elements/FromSelectMany.vue
rename to client/src/components/Form/Elements/FormSelectMany/FromSelectMany.vue

From 76eadb5b1b28321b8ca08cbed5e8462d79131021 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 17 Nov 2023 13:28:08 +0100
Subject: [PATCH 04/37] add main logic in a thread

---
 ...{FromSelectMany.vue => FormSelectMany.vue} | 18 +++--
 .../FormSelectMany/worker/selectMany.d.ts     | 30 ++++++++
 .../FormSelectMany/worker/selectMany.js       | 71 +++++++++++++++++++
 .../worker/selectMany.worker.js               | 54 ++++++++++++++
 .../FormSelectMany/worker/selectManyMain.ts   | 52 ++++++++++++++
 5 files changed, 221 insertions(+), 4 deletions(-)
 rename client/src/components/Form/Elements/FormSelectMany/{FromSelectMany.vue => FormSelectMany.vue} (89%)
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts

diff --git a/client/src/components/Form/Elements/FormSelectMany/FromSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
similarity index 89%
rename from client/src/components/Form/Elements/FormSelectMany/FromSelectMany.vue
rename to client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index b09b49c03768..636a4fe2f9a0 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FromSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -5,9 +5,10 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
 import { computed, type PropType, ref } from "vue";
 
-import { useFilterObjectArray } from "@/composables/filter";
 import { useUid } from "@/composables/utils/uid";
 
+import { useSelectMany } from "./worker/selectMany";
+
 library.add(faLongArrowAltLeft, faLongArrowAltRight);
 
 type SelectValue = Record<string, unknown> | string | number | null;
@@ -36,7 +37,7 @@ const props = defineProps({
         default: "Search for options",
     },
     value: {
-        type: String as PropType<SelectValue | SelectValue[]>,
+        type: Array as PropType<SelectValue | SelectValue[]>,
         default: null,
     },
 });
@@ -63,7 +64,16 @@ const searchRegex = computed(() => {
 
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
-const filteredOptions = useFilterObjectArray(props.options, searchValue, ["label"], asRegex);
+const { unselectedOptionsFiltered } = useSelectMany({
+    optionsArray: computed(() => props.options),
+    filter: searchValue,
+    selected: ref([]),
+    unselected: ref([]),
+    selectedDisplayCount: ref(1000),
+    unselectedDisplayCount: ref(1000),
+    asRegex,
+    caseSensitive: ref(false),
+});
 
 const highlightedUnselected = ref([]);
 const highlightedSelected = ref([]);
@@ -119,7 +129,7 @@ const deselectText = computed(() => {
                 </BButton>
             </div>
             <div class="options-list border-right">
-                <div v-for="option in filteredOptions" :key="option.label">
+                <div v-for="option in unselectedOptionsFiltered" :key="option.label">
                     {{ option.label }}
                 </div>
             </div>
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
new file mode 100644
index 000000000000..4f81b4360f6f
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -0,0 +1,30 @@
+import type { Ref } from "vue";
+
+export type SelectValue = Record<string, unknown> | string | number | null;
+
+export interface SelectOption {
+    label: string;
+    value: SelectValue;
+}
+
+export interface UseSelectManyOptions {
+    optionsArray: Ref<SelectOption[]>;
+    filter: Ref<string>;
+    unselected: Ref<SelectValue[]>;
+    selected: Ref<SelectValue[]>;
+    unselectedDisplayCount: Ref<number>;
+    selectedDisplayCount: Ref<number>;
+    asRegex: Ref<boolean>;
+    caseSensitive: Ref<boolean>;
+}
+
+export interface UseSelectManyReturn {
+    unselectedOptionsFiltered: Ref<SelectOption[]>;
+    selectedOptionsFiltered: Ref<SelectOption[]>;
+}
+
+/**
+ * Filter and grouping logic for FormSelectMany component.
+ * Runs in a thread, which is why it is abstracted in a composable.
+ */
+export declare function useSelectMany(options: UseSelectManyOptions): UseSelectManyReturn & { running: Ref<boolean> };
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
new file mode 100644
index 000000000000..1df8a8005a77
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -0,0 +1,71 @@
+import { onScopeDispose, ref, watchEffect } from "vue";
+
+// glue code together with the .worker.js file, to run `main` in a thread
+
+export function useSelectMany({
+    optionsArray,
+    filter,
+    unselected,
+    selected,
+    unselectedDisplayCount,
+    selectedDisplayCount,
+    asRegex,
+    caseSensitive,
+}) {
+    const worker = new Worker(new URL("./selectMany.worker.js", import.meta.url));
+
+    const unselectedOptionsFiltered = ref([]);
+    const selectedOptionsFiltered = ref([]);
+    const running = ref(false);
+
+    const post = (message) => {
+        worker.postMessage(message);
+        running.value = true;
+    };
+
+    onScopeDispose(() => {
+        worker.terminate();
+    });
+
+    watchEffect(() => {
+        post({ type: "setArray", array: optionsArray.value });
+    });
+
+    watchEffect(() => {
+        post({ type: "setFilter", filter: filter.value });
+    });
+
+    watchEffect(() => {
+        post({ type: "setUnselected", unselected: unselected.value });
+    });
+
+    watchEffect(() => {
+        post({ type: "setSelected", selected: selected.value });
+    });
+
+    watchEffect(() => {
+        post({
+            type: "setSettings",
+            unselectedDisplayCount: unselectedDisplayCount.value,
+            selectedDisplayCount: selectedDisplayCount.value,
+            asRegex: asRegex.value,
+            caseSensitive: caseSensitive.value,
+        });
+    });
+
+    worker.onmessage = (e) => {
+        const message = e.data;
+
+        if (message.type === "result") {
+            unselectedOptionsFiltered.value = message.unselectedOptionsFiltered;
+            selectedOptionsFiltered.value = message.selectedOptionsFiltered;
+            running.value = false;
+        }
+    };
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+        running,
+    };
+}
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
new file mode 100644
index 000000000000..bc6b719d58fc
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -0,0 +1,54 @@
+import { main } from "./selectManyMain";
+
+// glue code to run `main` in a thread
+
+const options = {
+    optionsArray: [],
+    filter: [],
+    unselected: [],
+    selected: [],
+    unselectedDisplayCount: 1000,
+    selectedDisplayCount: 1000,
+    asRegex: false,
+    caseSensitive: false,
+};
+
+let timer;
+
+self.addEventListener("message", (e) => {
+    const message = e.data;
+
+    switch (message.type) {
+        case "setArray":
+            options.optionsArray = message.array;
+            break;
+
+        case "setFilter":
+            options.filter = message.filter;
+            break;
+
+        case "setUnselected":
+            options.unselected = message.unselected;
+            break;
+
+        case "setSelected":
+            options.selected = message.selected;
+            break;
+
+        case "setSetting":
+            options.unselectedDisplayCount = message.unselectedDisplayCount;
+            options.selectedDisplayCount = message.selectedDisplayCount;
+            options.asRegex = message.asRegex;
+            options.caseSensitive = message.caseSensitive;
+            break;
+
+        default:
+            break;
+    }
+
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+        const result = main(options);
+        self.postMessage({ type: "result", ...result });
+    }, 10);
+});
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
new file mode 100644
index 000000000000..9d81603fcd60
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -0,0 +1,52 @@
+import type { UnwrapNestedRefs } from "vue";
+
+import type { SelectOption, UseSelectManyOptions, UseSelectManyReturn } from "./selectMany";
+
+export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNestedRefs<UseSelectManyReturn> {
+    const unselectedOptionsFiltered: SelectOption[] = [];
+    const selectedOptionsFiltered: SelectOption[] = [];
+
+    let filteredSelectOptions: SelectOption[];
+    let filterRegex: RegExp | undefined;
+
+    if (options.asRegex) {
+        try {
+            filterRegex = new RegExp(options.filter, options.caseSensitive ? undefined : "i");
+        } catch (e) {
+            // ignore
+        }
+    }
+
+    if (options.asRegex && filterRegex) {
+        filteredSelectOptions = options.optionsArray.filter((option) => option.label.match(filterRegex!));
+    } else if (options.caseSensitive) {
+        filteredSelectOptions = options.optionsArray.filter((option) => option.label.includes(options.filter));
+    } else {
+        const filter = options.filter.toLowerCase();
+        filteredSelectOptions = options.optionsArray.filter((option) => option.label.toLowerCase().includes(filter));
+    }
+
+    const selectedValues = options.selected.map((value) => (typeof value === "object" ? JSON.stringify(value) : value));
+
+    filteredSelectOptions.forEach((option) => {
+        const value = typeof option.value === "object" ? JSON.stringify(option.value) : option.value;
+
+        if (
+            unselectedOptionsFiltered.length < options.unselectedDisplayCount ||
+            selectedOptionsFiltered.length < options.selectedDisplayCount
+        ) {
+            const isSelected = selectedValues.includes(value);
+
+            if (isSelected && selectedOptionsFiltered.length < options.selectedDisplayCount) {
+                selectedOptionsFiltered.push(option);
+            } else if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
+                unselectedOptionsFiltered.push(option);
+            }
+        }
+    });
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+    };
+}

From 9605d46927e72b72a64a8b2827692313a9b33760 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 17 Nov 2023 20:29:24 +0100
Subject: [PATCH 05/37] pass value to worker

---
 .../FormSelectMany/FormSelectMany.vue         | 14 +++++--
 .../FormSelectMany/worker/selectMany.d.ts     |  1 -
 .../FormSelectMany/worker/selectMany.js       | 21 ++++++----
 .../worker/selectMany.worker.js               | 27 +++++++------
 .../FormSelectMany/worker/selectManyMain.ts   | 39 ++++++++++++-------
 5 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 636a4fe2f9a0..b2c29f8621e6 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -42,7 +42,7 @@ const props = defineProps({
     },
 });
 
-const _emit = defineEmits<{
+const emit = defineEmits<{
     (e: "input", value: Array<SelectValue>): void;
 }>();
 
@@ -62,13 +62,21 @@ const searchRegex = computed(() => {
     }
 });
 
+const selected = computed({
+    get() {
+        return Array.isArray(props.value) ? props.value : [props.value];
+    },
+    set(value) {
+        emit("input", value);
+    },
+});
+
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
 const { unselectedOptionsFiltered } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
-    selected: ref([]),
-    unselected: ref([]),
+    selected,
     selectedDisplayCount: ref(1000),
     unselectedDisplayCount: ref(1000),
     asRegex,
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
index 4f81b4360f6f..d1d13aa30cff 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -10,7 +10,6 @@ export interface SelectOption {
 export interface UseSelectManyOptions {
     optionsArray: Ref<SelectOption[]>;
     filter: Ref<string>;
-    unselected: Ref<SelectValue[]>;
     selected: Ref<SelectValue[]>;
     unselectedDisplayCount: Ref<number>;
     selectedDisplayCount: Ref<number>;
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index 1df8a8005a77..84d0ce9db57c 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -2,24 +2,31 @@ import { onScopeDispose, ref, watchEffect } from "vue";
 
 // glue code together with the .worker.js file, to run `main` in a thread
 
+let worker;
+let idCounter = 0;
+
 export function useSelectMany({
     optionsArray,
     filter,
-    unselected,
     selected,
     unselectedDisplayCount,
     selectedDisplayCount,
     asRegex,
     caseSensitive,
 }) {
-    const worker = new Worker(new URL("./selectMany.worker.js", import.meta.url));
+    // only start a single worker
+    if (!worker) {
+        worker = new Worker(new URL("./selectMany.worker.js", import.meta.url));
+    }
+
+    const id = idCounter++;
 
     const unselectedOptionsFiltered = ref([]);
     const selectedOptionsFiltered = ref([]);
     const running = ref(false);
 
     const post = (message) => {
-        worker.postMessage(message);
+        worker.postMessage({ id, ...message });
         running.value = true;
     };
 
@@ -35,10 +42,6 @@ export function useSelectMany({
         post({ type: "setFilter", filter: filter.value });
     });
 
-    watchEffect(() => {
-        post({ type: "setUnselected", unselected: unselected.value });
-    });
-
     watchEffect(() => {
         post({ type: "setSelected", selected: selected.value });
     });
@@ -56,6 +59,10 @@ export function useSelectMany({
     worker.onmessage = (e) => {
         const message = e.data;
 
+        if (message.id !== id) {
+            return;
+        }
+
         if (message.type === "result") {
             unselectedOptionsFiltered.value = message.unselectedOptionsFiltered;
             selectedOptionsFiltered.value = message.selectedOptionsFiltered;
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index bc6b719d58fc..3fe3b9bf05f2 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -2,22 +2,28 @@ import { main } from "./selectManyMain";
 
 // glue code to run `main` in a thread
 
-const options = {
+const createOptions = () => ({
     optionsArray: [],
     filter: [],
-    unselected: [],
     selected: [],
     unselectedDisplayCount: 1000,
     selectedDisplayCount: 1000,
     asRegex: false,
     caseSensitive: false,
-};
+});
 
-let timer;
+const optionsById = {};
+const timerById = {};
 
 self.addEventListener("message", (e) => {
     const message = e.data;
 
+    if (!(message.id in optionsById)) {
+        optionsById[message.id] = createOptions();
+    }
+
+    const options = optionsById[message.id];
+
     switch (message.type) {
         case "setArray":
             options.optionsArray = message.array;
@@ -27,10 +33,6 @@ self.addEventListener("message", (e) => {
             options.filter = message.filter;
             break;
 
-        case "setUnselected":
-            options.unselected = message.unselected;
-            break;
-
         case "setSelected":
             options.selected = message.selected;
             break;
@@ -46,9 +48,12 @@ self.addEventListener("message", (e) => {
             break;
     }
 
-    clearTimeout(timer);
-    timer = setTimeout(() => {
+    if (message.id in timerById) {
+        clearTimeout(timerById[message.id]);
+    }
+
+    timerById[message.id] = setTimeout(() => {
         const result = main(options);
-        self.postMessage({ type: "result", ...result });
+        self.postMessage({ id: message.id, type: "result", ...result });
     }, 10);
 });
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 9d81603fcd60..8ce0f984d681 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -1,6 +1,6 @@
 import type { UnwrapNestedRefs } from "vue";
 
-import type { SelectOption, UseSelectManyOptions, UseSelectManyReturn } from "./selectMany";
+import type { SelectOption, SelectValue, UseSelectManyOptions, UseSelectManyReturn } from "./selectMany";
 
 export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNestedRefs<UseSelectManyReturn> {
     const unselectedOptionsFiltered: SelectOption[] = [];
@@ -26,27 +26,40 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
         filteredSelectOptions = options.optionsArray.filter((option) => option.label.toLowerCase().includes(filter));
     }
 
-    const selectedValues = options.selected.map((value) => (typeof value === "object" ? JSON.stringify(value) : value));
+    const selectedValues = options.selected.map(stringifyObject);
 
-    filteredSelectOptions.forEach((option) => {
-        const value = typeof option.value === "object" ? JSON.stringify(option.value) : option.value;
+    for (let index = 0; index < filteredSelectOptions.length; index++) {
+        const option = filteredSelectOptions[index]!;
+
+        const value = stringifyObject(option.value);
+
+        const isSelected = selectedValues.includes(value);
+
+        if (isSelected && selectedOptionsFiltered.length < options.selectedDisplayCount) {
+            selectedOptionsFiltered.push(option);
+        } else if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
+            unselectedOptionsFiltered.push(option);
+        }
 
         if (
-            unselectedOptionsFiltered.length < options.unselectedDisplayCount ||
+            unselectedOptionsFiltered.length < options.unselectedDisplayCount &&
             selectedOptionsFiltered.length < options.selectedDisplayCount
         ) {
-            const isSelected = selectedValues.includes(value);
-
-            if (isSelected && selectedOptionsFiltered.length < options.selectedDisplayCount) {
-                selectedOptionsFiltered.push(option);
-            } else if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
-                unselectedOptionsFiltered.push(option);
-            }
+            break;
         }
-    });
+    }
 
     return {
         unselectedOptionsFiltered,
         selectedOptionsFiltered,
     };
 }
+
+/**
+ * Convert object to strings, leaving every other value unchanged
+ * @param value
+ * @returns
+ */
+function stringifyObject(value: SelectValue) {
+    return typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+}

From cc709fb8dd66f76b191581fa6dbdc716545bdc67 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 11:00:16 +0100
Subject: [PATCH 06/37] fix shared worker memory issues

---
 .../Elements/FormSelectMany/worker/selectMany.js     | 12 +++++++++++-
 .../FormSelectMany/worker/selectMany.worker.js       |  4 ++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index 84d0ce9db57c..b5d6ffe4b5b0 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -4,6 +4,7 @@ import { onScopeDispose, ref, watchEffect } from "vue";
 
 let worker;
 let idCounter = 0;
+let workerReferenceCount = 0;
 
 export function useSelectMany({
     optionsArray,
@@ -19,6 +20,8 @@ export function useSelectMany({
         worker = new Worker(new URL("./selectMany.worker.js", import.meta.url));
     }
 
+    workerReferenceCount += 1;
+
     const id = idCounter++;
 
     const unselectedOptionsFiltered = ref([]);
@@ -31,7 +34,14 @@ export function useSelectMany({
     };
 
     onScopeDispose(() => {
-        worker.terminate();
+        workerReferenceCount -= 1;
+
+        if (workerReferenceCount === 0) {
+            worker.terminate();
+            worker = null;
+        } else {
+            post({ type: "clear" });
+        }
     });
 
     watchEffect(() => {
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index 3fe3b9bf05f2..116ffab5c919 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -44,6 +44,10 @@ self.addEventListener("message", (e) => {
             options.caseSensitive = message.caseSensitive;
             break;
 
+        case "clear":
+            delete optionsById[message.id];
+            return;
+
         default:
             break;
     }

From 9996cf650c075f1eb762006c64b7618063a814b7 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 11:37:31 +0100
Subject: [PATCH 07/37] add caseSensitive fix worker only works for single
 element at a time

---
 .../FormSelectMany/FormSelectMany.vue         | 23 ++++++++++++++++++-
 .../FormSelectMany/worker/selectMany.js       |  4 ++--
 .../worker/selectMany.worker.js               |  2 +-
 .../FormSelectMany/worker/selectManyMain.ts   |  4 ++--
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index b2c29f8621e6..e91d8c63efc9 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -73,6 +73,9 @@ const selected = computed({
 
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
+
+const caseSensitive = ref(false);
+
 const { unselectedOptionsFiltered } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
@@ -80,7 +83,7 @@ const { unselectedOptionsFiltered } = useSelectMany({
     selectedDisplayCount: ref(1000),
     unselectedDisplayCount: ref(1000),
     asRegex,
-    caseSensitive: ref(false),
+    caseSensitive,
 });
 
 const highlightedUnselected = ref([]);
@@ -118,6 +121,16 @@ const deselectText = computed(() => {
 
             <template v-slot:append>
                 <BButton
+                    class="toggle-button"
+                    :variant="caseSensitive ? 'primary' : 'outline-primary'"
+                    role="switch"
+                    :aria-checked="caseSensitive"
+                    title="case sensitive"
+                    @click="caseSensitive = !caseSensitive">
+                    Aa
+                </BButton>
+                <BButton
+                    class="toggle-button"
                     :variant="useRegex ? 'primary' : 'outline-primary'"
                     role="switch"
                     :aria-checked="useRegex"
@@ -156,6 +169,14 @@ const deselectText = computed(() => {
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+.form-select-many {
+    .toggle-button {
+        padding-left: 0;
+        padding-right: 0;
+        width: 2rem;
+    }
+}
+
 .options-box {
     resize: vertical;
     overflow: hidden;
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index b5d6ffe4b5b0..b0c8255ebc79 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -66,7 +66,7 @@ export function useSelectMany({
         });
     });
 
-    worker.onmessage = (e) => {
+    worker.addEventListener("message", (e) => {
         const message = e.data;
 
         if (message.id !== id) {
@@ -78,7 +78,7 @@ export function useSelectMany({
             selectedOptionsFiltered.value = message.selectedOptionsFiltered;
             running.value = false;
         }
-    };
+    });
 
     return {
         unselectedOptionsFiltered,
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index 116ffab5c919..a4111bb14ccb 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -4,7 +4,7 @@ import { main } from "./selectManyMain";
 
 const createOptions = () => ({
     optionsArray: [],
-    filter: [],
+    filter: "",
     selected: [],
     unselectedDisplayCount: 1000,
     selectedDisplayCount: 1000,
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 8ce0f984d681..6f37c1c82df7 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -42,8 +42,8 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
         }
 
         if (
-            unselectedOptionsFiltered.length < options.unselectedDisplayCount &&
-            selectedOptionsFiltered.length < options.selectedDisplayCount
+            unselectedOptionsFiltered.length > options.unselectedDisplayCount &&
+            selectedOptionsFiltered.length > options.selectedDisplayCount
         ) {
             break;
         }

From 9501b37995d9ad54536e40573f472dc3e188ed33 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 13:05:36 +0100
Subject: [PATCH 08/37] add selectAll deselectAll functionality

---
 .../FormSelectMany/FormSelectMany.vue         | 156 ++++++++++++++++--
 .../FormSelectMany/worker/filterOptions.ts    |  22 +++
 .../worker/selectMany.worker.js               |   2 +-
 .../FormSelectMany/worker/selectManyMain.ts   |  17 +-
 4 files changed, 177 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index e91d8c63efc9..ba85d22c851d 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -7,6 +7,7 @@ import { computed, type PropType, ref } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
 
+import { filterOptions } from "./worker/filterOptions";
 import { useSelectMany } from "./worker/selectMany";
 
 library.add(faLongArrowAltLeft, faLongArrowAltRight);
@@ -48,11 +49,12 @@ const emit = defineEmits<{
 
 const searchValue = ref("");
 const useRegex = ref(false);
+const caseSensitive = ref(false);
 
 const searchRegex = computed(() => {
     if (useRegex.value) {
         try {
-            const regex = new RegExp(searchValue.value);
+            const regex = new RegExp(searchValue.value, caseSensitive.value ? undefined : "i");
             return regex;
         } catch (e) {
             return null;
@@ -74,9 +76,7 @@ const selected = computed({
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
 
-const caseSensitive = ref(false);
-
-const { unselectedOptionsFiltered } = useSelectMany({
+const { unselectedOptionsFiltered, selectedOptionsFiltered } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
     selected,
@@ -86,6 +86,77 @@ const { unselectedOptionsFiltered } = useSelectMany({
     caseSensitive,
 });
 
+function selectOption(index: number) {
+    const [option] = unselectedOptionsFiltered.value.splice(index, 1);
+
+    if (option) {
+        selected.value.push(option.value);
+    }
+}
+
+function deselectOption(index: number) {
+    const [option] = selectedOptionsFiltered.value.splice(index, 1);
+
+    if (option) {
+        const i = selected.value.indexOf(option.value);
+        selected.value.splice(i, 1);
+    }
+}
+
+function selectAll() {
+    if (searchValue.value === "") {
+        selected.value = props.options.map((o) => o.value);
+    } else if (highlightedUnselected.value.length > 0) {
+        // todo
+    } else {
+        const filteredValues = filterOptions(
+            props.options,
+            searchValue.value,
+            asRegex.value,
+            caseSensitive.value,
+            searchRegex.value
+        ).map((o) => o.value);
+
+        const selectedSet = new Set([...selected.value, ...filteredValues]);
+        selected.value = Array.from(selectedSet);
+    }
+
+    unselectedOptionsFiltered.value = [];
+}
+
+function deselectAll() {
+    if (searchValue.value === "") {
+        selected.value = [];
+    } else if (highlightedSelected.value.length > 0) {
+        // todo
+    } else {
+        const selectedSet = new Set(selected.value);
+        const filteredValues = filterOptions(
+            props.options,
+            searchValue.value,
+            asRegex.value,
+            caseSensitive.value,
+            searchRegex.value
+        ).map((o) => o.value);
+
+        filteredValues.forEach((v) => selectedSet.delete(v));
+        selected.value = Array.from(selectedSet);
+    }
+
+    selectedOptionsFiltered.value = [];
+}
+
+function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent, index: number) {
+    if (!["ArrowUp", "ArrowDown"].includes(event.key)) {
+        return;
+    }
+
+    event.preventDefault();
+
+    const nextIndex = event.key === "ArrowUp" ? index - 1 : index + 1;
+    document.getElementById(`select-many-${props.id}-${selected}-${nextIndex}`)?.focus();
+}
+
 const highlightedUnselected = ref([]);
 const highlightedSelected = ref([]);
 
@@ -144,24 +215,40 @@ const deselectText = computed(() => {
         <div class="options-box border rounded p-2 mt-2">
             <div class="selection-heading border-right px-2">
                 <span>Unselected</span>
-                <BButton class="selection-button" :title="selectText" variant="primary">
+                <BButton class="selection-button" :title="selectText" variant="primary" @click="selectAll">
                     {{ selectText }}
                     <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
                 </BButton>
             </div>
-            <div class="options-list border-right">
-                <div v-for="option in unselectedOptionsFiltered" :key="option.label">
+            <div class="options-list unselected border-right" tabindex="-1" @keydown.up.down.prevent>
+                <button
+                    v-for="(option, i) in unselectedOptionsFiltered"
+                    :id="`select-many-${props.id}-unselected-${i}`"
+                    :key="option.label"
+                    :tabindex="i === 0 ? 0 : -1"
+                    @click="selectOption(i)"
+                    @keyup="(e) => optionOnKey('unselected', e, i)">
                     {{ option.label }}
-                </div>
+                </button>
             </div>
             <div class="selection-heading px-2">
                 <span>Selected</span>
-                <BButton class="selection-button" :title="deselectText" variant="primary">
+                <BButton class="selection-button" :title="deselectText" variant="primary" @click="deselectAll">
                     <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
                     {{ deselectText }}
                 </BButton>
             </div>
-            <div class="options-list"></div>
+            <div class="options-list selected" tabindex="-1" @keydown.up.down.prevent>
+                <button
+                    v-for="(option, i) in selectedOptionsFiltered"
+                    :id="`select-many-${props.id}-selected-${i}`"
+                    :key="option.label"
+                    :tabindex="i === 0 ? 0 : -1"
+                    @click="deselectOption(i)"
+                    @keyup="(e) => optionOnKey('selected', e, i)">
+                    {{ option.label }}
+                </button>
+            </div>
         </div>
     </section>
 </template>
@@ -181,6 +268,7 @@ const deselectText = computed(() => {
     resize: vertical;
     overflow: hidden;
     min-height: 200px;
+    height: 200px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto 1fr;
@@ -199,4 +287,52 @@ const deselectText = computed(() => {
         }
     }
 }
+
+.options-list {
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+
+    button {
+        text-align: start;
+        border: none;
+        padding: 0 0.5rem;
+        background: none;
+        transition: none;
+        display: flex;
+        justify-content: space-between;
+
+        &:hover {
+            background-color: $brand-secondary;
+        }
+
+        &:focus-visible {
+            outline-color: $brand-primary;
+            outline-width: 2px;
+            outline-offset: -2px;
+            outline-style: solid;
+            box-shadow: none;
+        }
+
+        &:hover,
+        &:focus {
+            &::after {
+                content: "click to select";
+                color: darken($brand-secondary, 40%);
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.options-list.selected {
+    button {
+        &:hover,
+        &:focus {
+            &::after {
+                content: "click to deselect";
+            }
+        }
+    }
+}
 </style>
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
new file mode 100644
index 000000000000..fe4a6486d35a
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
@@ -0,0 +1,22 @@
+import { SelectOption } from "./selectMany";
+
+export function filterOptions(
+    options: SelectOption[],
+    filterString: string,
+    asRegex: boolean,
+    caseSensitive: boolean,
+    filterRegex?: RegExp | null
+) {
+    let filteredSelectOptions;
+
+    if (asRegex && filterRegex) {
+        filteredSelectOptions = options.filter((option) => Boolean(option.label.match(filterRegex!)));
+    } else if (caseSensitive) {
+        filteredSelectOptions = options.filter((option) => option.label.includes(filterString));
+    } else {
+        const filter = filterString.toLowerCase();
+        filteredSelectOptions = options.filter((option) => option.label.toLowerCase().includes(filter));
+    }
+
+    return filteredSelectOptions;
+}
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index a4111bb14ccb..b426f9224e8f 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -37,7 +37,7 @@ self.addEventListener("message", (e) => {
             options.selected = message.selected;
             break;
 
-        case "setSetting":
+        case "setSettings":
             options.unselectedDisplayCount = message.unselectedDisplayCount;
             options.selectedDisplayCount = message.selectedDisplayCount;
             options.asRegex = message.asRegex;
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 6f37c1c82df7..125a53f662c1 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -1,12 +1,12 @@
 import type { UnwrapNestedRefs } from "vue";
 
+import { filterOptions } from "./filterOptions";
 import type { SelectOption, SelectValue, UseSelectManyOptions, UseSelectManyReturn } from "./selectMany";
 
 export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNestedRefs<UseSelectManyReturn> {
     const unselectedOptionsFiltered: SelectOption[] = [];
     const selectedOptionsFiltered: SelectOption[] = [];
 
-    let filteredSelectOptions: SelectOption[];
     let filterRegex: RegExp | undefined;
 
     if (options.asRegex) {
@@ -17,14 +17,13 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
         }
     }
 
-    if (options.asRegex && filterRegex) {
-        filteredSelectOptions = options.optionsArray.filter((option) => option.label.match(filterRegex!));
-    } else if (options.caseSensitive) {
-        filteredSelectOptions = options.optionsArray.filter((option) => option.label.includes(options.filter));
-    } else {
-        const filter = options.filter.toLowerCase();
-        filteredSelectOptions = options.optionsArray.filter((option) => option.label.toLowerCase().includes(filter));
-    }
+    const filteredSelectOptions = filterOptions(
+        options.optionsArray,
+        options.filter,
+        options.asRegex,
+        options.caseSensitive,
+        filterRegex
+    );
 
     const selectedValues = options.selected.map(stringifyObject);
 

From e9bb0778dfa6351dac7606a2c92834e855ffd675 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:25:43 +0100
Subject: [PATCH 09/37] improve keyboard navigation show info for selecting and
 processing

---
 .../FormSelectMany/FormSelectMany.vue         | 74 +++++++++++++++----
 1 file changed, 59 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index ba85d22c851d..fb8fdb4ff612 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -2,8 +2,9 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { refDebounced } from "@vueuse/core";
 import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
-import { computed, type PropType, ref } from "vue";
+import { computed, nextTick, type PropType, ref } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
 
@@ -20,7 +21,7 @@ interface SelectOption {
 }
 
 const props = defineProps({
-    id: { type: String, default: useUid("form-select-many-").value },
+    id: { type: String, default: () => useUid("form-select-many-").value },
     disabled: {
         type: Boolean,
         default: false,
@@ -76,7 +77,7 @@ const selected = computed({
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
 
-const { unselectedOptionsFiltered, selectedOptionsFiltered } = useSelectMany({
+const { unselectedOptionsFiltered, selectedOptionsFiltered, running } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
     selected,
@@ -86,21 +87,43 @@ const { unselectedOptionsFiltered, selectedOptionsFiltered } = useSelectMany({
     caseSensitive,
 });
 
-function selectOption(index: number) {
+const workerRunning = refDebounced(running, 1000);
+
+async function selectOption(index: number) {
     const [option] = unselectedOptionsFiltered.value.splice(index, 1);
 
     if (option) {
         selected.value.push(option.value);
     }
+
+    // select the element which now is where the removed element just was
+    // to improve keyboard navigation
+    await nextTick();
+
+    const el = document.getElementById(`${props.id}-unselected-${index}`);
+    if (el) {
+        el.focus();
+    } else {
+        document.getElementById(`${props.id}-unselected-${index - 1}`)?.focus();
+    }
 }
 
-function deselectOption(index: number) {
+async function deselectOption(index: number) {
     const [option] = selectedOptionsFiltered.value.splice(index, 1);
 
     if (option) {
         const i = selected.value.indexOf(option.value);
         selected.value.splice(i, 1);
     }
+
+    await nextTick();
+
+    const el = document.getElementById(`${props.id}-selected-${index}`);
+    if (el) {
+        el.focus();
+    } else {
+        document.getElementById(`${props.id}-selected-${index - 1}`)?.focus();
+    }
 }
 
 function selectAll() {
@@ -154,7 +177,7 @@ function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent,
     event.preventDefault();
 
     const nextIndex = event.key === "ArrowUp" ? index - 1 : index + 1;
-    document.getElementById(`select-many-${props.id}-${selected}-${nextIndex}`)?.focus();
+    document.getElementById(`${props.id}-${selected}-${nextIndex}`)?.focus();
 }
 
 const highlightedUnselected = ref([]);
@@ -212,7 +235,7 @@ const deselectText = computed(() => {
             </template>
         </BInputGroup>
 
-        <div class="options-box border rounded p-2 mt-2">
+        <div class="options-box border rounded mt-2">
             <div class="selection-heading border-right px-2">
                 <span>Unselected</span>
                 <BButton class="selection-button" :title="selectText" variant="primary" @click="selectAll">
@@ -223,11 +246,11 @@ const deselectText = computed(() => {
             <div class="options-list unselected border-right" tabindex="-1" @keydown.up.down.prevent>
                 <button
                     v-for="(option, i) in unselectedOptionsFiltered"
-                    :id="`select-many-${props.id}-unselected-${i}`"
+                    :id="`${props.id}-unselected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
                     @click="selectOption(i)"
-                    @keyup="(e) => optionOnKey('unselected', e, i)">
+                    @keydown="(e) => optionOnKey('unselected', e, i)">
                     {{ option.label }}
                 </button>
             </div>
@@ -241,15 +264,19 @@ const deselectText = computed(() => {
             <div class="options-list selected" tabindex="-1" @keydown.up.down.prevent>
                 <button
                     v-for="(option, i) in selectedOptionsFiltered"
-                    :id="`select-many-${props.id}-selected-${i}`"
+                    :id="`${props.id}-selected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
                     @click="deselectOption(i)"
-                    @keyup="(e) => optionOnKey('selected', e, i)">
+                    @keydown="(e) => optionOnKey('selected', e, i)">
                     {{ option.label }}
                 </button>
             </div>
         </div>
+        <div class="bottom-row-info">
+            <span> Shift to highlight range. Ctrl to highlight multiple </span>
+            <span v-if="workerRunning"> Processing... </span>
+        </div>
     </section>
 </template>
 
@@ -273,6 +300,7 @@ const deselectText = computed(() => {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto 1fr;
     grid-auto-flow: column;
+    padding: 0.5rem;
 
     .selection-heading {
         color: $gray-600;
@@ -302,10 +330,6 @@ const deselectText = computed(() => {
         display: flex;
         justify-content: space-between;
 
-        &:hover {
-            background-color: $brand-secondary;
-        }
-
         &:focus-visible {
             outline-color: $brand-primary;
             outline-width: 2px;
@@ -316,12 +340,18 @@ const deselectText = computed(() => {
 
         &:hover,
         &:focus {
+            background-color: $brand-secondary;
+
             &::after {
                 content: "click to select";
                 color: darken($brand-secondary, 40%);
                 font-weight: bold;
             }
         }
+
+        &:focus-visible::after {
+            content: "enter to select";
+        }
     }
 }
 
@@ -333,6 +363,20 @@ const deselectText = computed(() => {
                 content: "click to deselect";
             }
         }
+
+        &:focus-visible::after {
+            content: "enter to deselect";
+        }
     }
 }
+
+.bottom-row-info {
+    font-style: italic;
+    color: darken($gray-400, 10%);
+    font-size: 0.75rem;
+    padding: 0 0.25rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
 </style>

From f06404c14fcce575339c1752700ccf55f42e54ee Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 17:40:32 +0100
Subject: [PATCH 10/37] add showMore indicator

---
 .../FormSelectMany/FormSelectMany.vue         | 35 +++++++++++++++++--
 .../FormSelectMany/worker/selectMany.d.ts     |  2 ++
 .../FormSelectMany/worker/selectMany.js       |  6 ++++
 .../FormSelectMany/worker/selectManyMain.ts   | 25 +++++++++----
 4 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index fb8fdb4ff612..8493596bea62 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -77,12 +77,15 @@ const selected = computed({
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
 const asRegex = computed(() => searchRegex.value !== null);
 
-const { unselectedOptionsFiltered, selectedOptionsFiltered, running } = useSelectMany({
+const selectedDisplayCount = ref(500);
+const unselectedDisplayCount = ref(500);
+
+const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselected, moreSelected } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
     selected,
-    selectedDisplayCount: ref(1000),
-    unselectedDisplayCount: ref(1000),
+    selectedDisplayCount,
+    unselectedDisplayCount,
     asRegex,
     caseSensitive,
 });
@@ -253,6 +256,11 @@ const deselectText = computed(() => {
                     @keydown="(e) => optionOnKey('unselected', e, i)">
                     {{ option.label }}
                 </button>
+
+                <span v-if="moreUnselected" class="show-more-indicator">
+                    Limited to {{ unselectedDisplayCount }} options.
+                    <button @click="unselectedDisplayCount += 500">Show more</button>
+                </span>
             </div>
             <div class="selection-heading px-2">
                 <span>Selected</span>
@@ -271,6 +279,11 @@ const deselectText = computed(() => {
                     @keydown="(e) => optionOnKey('selected', e, i)">
                     {{ option.label }}
                 </button>
+
+                <span v-if="moreSelected" class="show-more-indicator">
+                    Limited to {{ selectedDisplayCount }} options.
+                    <button @click="selectedDisplayCount += 500">Show more</button>
+                </span>
             </div>
         </div>
         <div class="bottom-row-info">
@@ -353,6 +366,22 @@ const deselectText = computed(() => {
             content: "enter to select";
         }
     }
+
+    .show-more-indicator {
+        display: flex;
+        font-style: italic;
+        padding-left: 0.5rem;
+        color: darken($gray-400, 20%);
+
+        button::after {
+            content: none;
+        }
+
+        button {
+            color: $brand-info;
+            text-decoration: underline;
+        }
+    }
 }
 
 .options-list.selected {
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
index d1d13aa30cff..48cfa6a4989f 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -20,6 +20,8 @@ export interface UseSelectManyOptions {
 export interface UseSelectManyReturn {
     unselectedOptionsFiltered: Ref<SelectOption[]>;
     selectedOptionsFiltered: Ref<SelectOption[]>;
+    moreUnselected: Ref<boolean>;
+    moreSelected: Ref<boolean>;
 }
 
 /**
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index b0c8255ebc79..b6c041a922bd 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -26,6 +26,8 @@ export function useSelectMany({
 
     const unselectedOptionsFiltered = ref([]);
     const selectedOptionsFiltered = ref([]);
+    const moreSelected = ref(false);
+    const moreUnselected = ref(false);
     const running = ref(false);
 
     const post = (message) => {
@@ -76,6 +78,8 @@ export function useSelectMany({
         if (message.type === "result") {
             unselectedOptionsFiltered.value = message.unselectedOptionsFiltered;
             selectedOptionsFiltered.value = message.selectedOptionsFiltered;
+            moreSelected.value = message.moreSelected;
+            moreUnselected.value = message.moreUnselected;
             running.value = false;
         }
     });
@@ -83,6 +87,8 @@ export function useSelectMany({
     return {
         unselectedOptionsFiltered,
         selectedOptionsFiltered,
+        moreSelected,
+        moreUnselected,
         running,
     };
 }
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 125a53f662c1..0f90b8f5094d 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -27,6 +27,9 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
 
     const selectedValues = options.selected.map(stringifyObject);
 
+    let moreUnselected = false;
+    let moreSelected = false;
+
     for (let index = 0; index < filteredSelectOptions.length; index++) {
         const option = filteredSelectOptions[index]!;
 
@@ -34,23 +37,33 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
 
         const isSelected = selectedValues.includes(value);
 
-        if (isSelected && selectedOptionsFiltered.length < options.selectedDisplayCount) {
-            selectedOptionsFiltered.push(option);
-        } else if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
-            unselectedOptionsFiltered.push(option);
-        }
-
         if (
             unselectedOptionsFiltered.length > options.unselectedDisplayCount &&
             selectedOptionsFiltered.length > options.selectedDisplayCount
         ) {
             break;
         }
+
+        if (isSelected) {
+            if (selectedOptionsFiltered.length < options.selectedDisplayCount) {
+                selectedOptionsFiltered.push(option);
+            } else {
+                moreSelected = true;
+            }
+        } else {
+            if (unselectedOptionsFiltered.length < options.unselectedDisplayCount) {
+                unselectedOptionsFiltered.push(option);
+            } else {
+                moreUnselected = true;
+            }
+        }
     }
 
     return {
         unselectedOptionsFiltered,
         selectedOptionsFiltered,
+        moreUnselected,
+        moreSelected,
     };
 }
 

From 62fb1fe4e234ad0e55eab2985b94a50ff350fa61 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:23:30 +0100
Subject: [PATCH 11/37] add highlight selection

---
 .../FormSelectMany/FormSelectMany.vue         |  51 +++++++--
 .../Elements/FormSelectMany/useHighlight.ts   | 107 ++++++++++++++++++
 2 files changed, 146 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/useHighlight.ts

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 8493596bea62..a0f3a697f2cf 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -4,10 +4,11 @@ import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { refDebounced } from "@vueuse/core";
 import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
-import { computed, nextTick, type PropType, ref } from "vue";
+import { computed, nextTick, type PropType, reactive, ref } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
 
+import { useHighlight } from "./useHighlight";
 import { filterOptions } from "./worker/filterOptions";
 import { useSelectMany } from "./worker/selectMany";
 
@@ -130,10 +131,12 @@ async function deselectOption(index: number) {
 }
 
 function selectAll() {
-    if (searchValue.value === "") {
+    if (highlightUnselected.highlightedIndexes.length > 0) {
+        const highlightedValues = highlightUnselected.highlightedOptions.map((o) => o.value);
+        const selectedSet = new Set([...selected.value, ...highlightedValues]);
+        selected.value = Array.from(selectedSet);
+    } else if (searchValue.value === "") {
         selected.value = props.options.map((o) => o.value);
-    } else if (highlightedUnselected.value.length > 0) {
-        // todo
     } else {
         const filteredValues = filterOptions(
             props.options,
@@ -153,7 +156,7 @@ function selectAll() {
 function deselectAll() {
     if (searchValue.value === "") {
         selected.value = [];
-    } else if (highlightedSelected.value.length > 0) {
+        //} else if (highlightedSelected.value.length > 0) {
         // todo
     } else {
         const selectedSet = new Set(selected.value);
@@ -183,11 +186,10 @@ function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent,
     document.getElementById(`${props.id}-${selected}-${nextIndex}`)?.focus();
 }
 
-const highlightedUnselected = ref([]);
-const highlightedSelected = ref([]);
+const highlightUnselected = reactive(useHighlight(unselectedOptionsFiltered));
 
 const selectText = computed(() => {
-    if (highlightedUnselected.value.length > 0) {
+    if (highlightUnselected.highlightedIndexes.length > 0) {
         return "Select highlighted";
     } else if (searchValue.value === "") {
         return "Select all";
@@ -197,9 +199,9 @@ const selectText = computed(() => {
 });
 
 const deselectText = computed(() => {
-    if (highlightedSelected.value.length > 0) {
+    /*if (highlightedSelected.value.length > 0) {
         return "Deselect highlighted";
-    } else if (searchValue.value === "") {
+    } else*/ if (searchValue.value === "") {
         return "Deselect all";
     } else {
         return "Deselect filtered";
@@ -246,13 +248,23 @@ const deselectText = computed(() => {
                     <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
                 </BButton>
             </div>
-            <div class="options-list unselected border-right" tabindex="-1" @keydown.up.down.prevent>
+
+            <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+            <div
+                class="options-list unselected border-right"
+                tabindex="-1"
+                @keydown.up.down.prevent
+                @keyup.shift="highlightUnselected.abortHighlight()">
                 <button
                     v-for="(option, i) in unselectedOptionsFiltered"
                     :id="`${props.id}-unselected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
-                    @click="selectOption(i)"
+                    :class="{ highlighted: highlightUnselected.highlightedIndexes.includes(i) }"
+                    @click.shift.exact="highlightUnselected.onRangeHighlight(i)"
+                    @click.shift.ctrl.exact="highlightUnselected.onRangeRemoveHighlight(i)"
+                    @click.ctrl.exact="highlightUnselected.toggleHighlight(i)"
+                    @click.exact="selectOption(i)"
                     @keydown="(e) => optionOnKey('unselected', e, i)">
                     {{ option.label }}
                 </button>
@@ -343,6 +355,21 @@ const deselectText = computed(() => {
         display: flex;
         justify-content: space-between;
 
+        &.highlighted {
+            background-color: $brand-info;
+            border-radius: 0;
+            color: $white;
+
+            &:hover,
+            &:focus {
+                background-color: $brand-primary;
+
+                &::after {
+                    color: $white;
+                }
+            }
+        }
+
         &:focus-visible {
             outline-color: $brand-primary;
             outline-width: 2px;
diff --git a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
new file mode 100644
index 000000000000..cee6bbed70bf
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
@@ -0,0 +1,107 @@
+import { type Ref, ref, watch } from "vue";
+
+import { assertDefined } from "@/utils/assertions";
+
+import type { SelectOption } from "./worker/selectMany";
+
+export function useHighlight(options: Ref<SelectOption[]>) {
+    const highlightedOptions = ref<SelectOption[]>([]);
+    const highlightedIndexes = ref<number[]>([]);
+
+    const reset = () => {
+        highlightedOptions.value = [];
+        highlightedIndexes.value = [];
+        abortHighlight();
+    };
+
+    watch(
+        () => options.value,
+        () => reset()
+    );
+
+    let highlightIndexStart = -1;
+
+    const onRangeHighlight = (index: number) => {
+        if (highlightIndexStart === -1) {
+            highlightIndexStart = index;
+            addHighlight(index);
+            return;
+        }
+
+        const from = Math.min(highlightIndexStart, index);
+        const to = Math.max(highlightIndexStart, index);
+
+        for (let i = from; i <= to; i++) {
+            addHighlight(i);
+        }
+
+        highlightIndexStart = -1;
+    };
+
+    const onRangeRemoveHighlight = (index: number) => {
+        if (highlightIndexStart === -1) {
+            highlightIndexStart = index;
+            removeHighlight(index);
+            return;
+        }
+
+        const from = Math.min(highlightIndexStart, index);
+        const to = Math.max(highlightIndexStart, index);
+
+        for (let i = from; i <= to; i++) {
+            removeHighlight(i);
+        }
+
+        highlightIndexStart = -1;
+    };
+
+    const removeHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position !== -1) {
+            highlightedIndexes.value.splice(position, 1);
+            highlightedOptions.value.splice(position, 1);
+        }
+    };
+
+    const addHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position === -1) {
+            highlightedIndexes.value.push(index);
+            const option = options.value[index];
+            assertDefined(option);
+            highlightedOptions.value.push(option);
+        }
+    };
+
+    const toggleHighlight = (index: number) => {
+        const position = highlightedIndexes.value.indexOf(index);
+
+        if (position === -1) {
+            highlightedIndexes.value.push(index);
+            const option = options.value[index];
+            assertDefined(option);
+            highlightedOptions.value.push(option);
+        } else {
+            highlightedIndexes.value.splice(position, 1);
+            highlightedOptions.value.splice(position, 1);
+        }
+    };
+
+    const abortHighlight = () => {
+        highlightIndexStart = -1;
+    };
+
+    return {
+        highlightedOptions,
+        highlightedIndexes,
+        reset,
+        onRangeHighlight,
+        onRangeRemoveHighlight,
+        toggleHighlight,
+        abortHighlight,
+        addHighlight,
+        removeHighlight,
+    };
+}

From 7fc977f5b54ce830b3f92893d6eec4bb5f24614e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:17:54 +0100
Subject: [PATCH 12/37] add highlighting to selected fix blinking options on
 selecting highlighted

---
 .../FormSelectMany/FormSelectMany.vue         | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index a0f3a697f2cf..1429f75a288f 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -135,8 +135,12 @@ function selectAll() {
         const highlightedValues = highlightUnselected.highlightedOptions.map((o) => o.value);
         const selectedSet = new Set([...selected.value, ...highlightedValues]);
         selected.value = Array.from(selectedSet);
+
+        unselectedOptionsFiltered.value.filter((o) => highlightedValues.includes(o.value));
     } else if (searchValue.value === "") {
         selected.value = props.options.map((o) => o.value);
+
+        unselectedOptionsFiltered.value = [];
     } else {
         const filteredValues = filterOptions(
             props.options,
@@ -148,16 +152,23 @@ function selectAll() {
 
         const selectedSet = new Set([...selected.value, ...filteredValues]);
         selected.value = Array.from(selectedSet);
-    }
 
-    unselectedOptionsFiltered.value = [];
+        unselectedOptionsFiltered.value = [];
+    }
 }
 
 function deselectAll() {
-    if (searchValue.value === "") {
+    if (highlightSelected.highlightedIndexes.length > 0) {
+        const selectedSet = new Set(selected.value);
+        const highlightedValues = highlightSelected.highlightedOptions.map((o) => o.value);
+
+        highlightedValues.forEach((v) => selectedSet.delete(v));
+        selected.value = Array.from(selectedSet);
+
+        selectedOptionsFiltered.value.filter((o) => highlightedValues.includes(o.value));
+    } else if (searchValue.value === "") {
         selected.value = [];
-        //} else if (highlightedSelected.value.length > 0) {
-        // todo
+        selectedOptionsFiltered.value = [];
     } else {
         const selectedSet = new Set(selected.value);
         const filteredValues = filterOptions(
@@ -170,9 +181,9 @@ function deselectAll() {
 
         filteredValues.forEach((v) => selectedSet.delete(v));
         selected.value = Array.from(selectedSet);
-    }
 
-    selectedOptionsFiltered.value = [];
+        selectedOptionsFiltered.value = [];
+    }
 }
 
 function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent, index: number) {
@@ -187,6 +198,7 @@ function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent,
 }
 
 const highlightUnselected = reactive(useHighlight(unselectedOptionsFiltered));
+const highlightSelected = reactive(useHighlight(selectedOptionsFiltered));
 
 const selectText = computed(() => {
     if (highlightUnselected.highlightedIndexes.length > 0) {
@@ -199,9 +211,9 @@ const selectText = computed(() => {
 });
 
 const deselectText = computed(() => {
-    /*if (highlightedSelected.value.length > 0) {
+    if (highlightSelected.highlightedIndexes.length > 0) {
         return "Deselect highlighted";
-    } else*/ if (searchValue.value === "") {
+    } else if (searchValue.value === "") {
         return "Deselect all";
     } else {
         return "Deselect filtered";
@@ -287,7 +299,11 @@ const deselectText = computed(() => {
                     :id="`${props.id}-selected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
-                    @click="deselectOption(i)"
+                    :class="{ highlighted: highlightSelected.highlightedIndexes.includes(i) }"
+                    @click.shift.exact="highlightSelected.onRangeHighlight(i)"
+                    @click.shift.ctrl.exact="highlightSelected.onRangeRemoveHighlight(i)"
+                    @click.ctrl.exact="highlightSelected.toggleHighlight(i)"
+                    @click.exact="deselectOption(i)"
                     @keydown="(e) => optionOnKey('selected', e, i)">
                     {{ option.label }}
                 </button>

From f59e71d50bbe5affe3bd936b8396aa1f975c5179 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:39:01 +0100
Subject: [PATCH 13/37] fix keyboard highlight multiple

---
 .../FormSelectMany/FormSelectMany.vue         | 108 ++++++++++++------
 .../Elements/FormSelectMany/useHighlight.ts   |   8 +-
 2 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 1429f75a288f..bec3aa8a5015 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -4,7 +4,7 @@ import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { refDebounced } from "@vueuse/core";
 import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
-import { computed, nextTick, type PropType, reactive, ref } from "vue";
+import { computed, nextTick, type PropType, reactive, ref, type UnwrapRef } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
 
@@ -93,40 +93,69 @@ const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselec
 
 const workerRunning = refDebounced(running, 1000);
 
-async function selectOption(index: number) {
-    const [option] = unselectedOptionsFiltered.value.splice(index, 1);
-
-    if (option) {
-        selected.value.push(option.value);
+function handleHighlight(
+    event: MouseEvent | KeyboardEvent,
+    index: number,
+    highlightHandler: UnwrapRef<ReturnType<typeof useHighlight>>
+) {
+    if (event.shiftKey && event.ctrlKey) {
+        highlightHandler.rangeRemoveHighlight(index);
+    } else if (event.shiftKey) {
+        highlightHandler.rangeHighlight(index);
+    } else if (event.ctrlKey) {
+        highlightHandler.toggleHighlight(index);
     }
+}
 
-    // select the element which now is where the removed element just was
-    // to improve keyboard navigation
-    await nextTick();
-
-    const el = document.getElementById(`${props.id}-unselected-${index}`);
-    if (el) {
-        el.focus();
+async function selectOption(event: MouseEvent, index: number): Promise<void> {
+    if (event.shiftKey || event.ctrlKey) {
+        handleHighlight(event, index, highlightUnselected);
     } else {
-        document.getElementById(`${props.id}-unselected-${index - 1}`)?.focus();
+        const [option] = unselectedOptionsFiltered.value.splice(index, 1);
+
+        if (option) {
+            selected.value.push(option.value);
+        }
+
+        // select the element which now is where the removed element just was
+        // to improve keyboard navigation
+        await nextTick();
+
+        const el = document.getElementById(`${props.id}-unselected-${index}`);
+        if (el) {
+            el.focus();
+        } else {
+            document.getElementById(`${props.id}-unselected-${index - 1}`)?.focus();
+        }
     }
 }
 
-async function deselectOption(index: number) {
-    const [option] = selectedOptionsFiltered.value.splice(index, 1);
+async function deselectOption(event: MouseEvent, index: number) {
+    if (event.shiftKey || event.ctrlKey) {
+        handleHighlight(event, index, highlightSelected);
+    } else {
+        const [option] = selectedOptionsFiltered.value.splice(index, 1);
 
-    if (option) {
-        const i = selected.value.indexOf(option.value);
-        selected.value.splice(i, 1);
-    }
+        if (option) {
+            const i = selected.value.indexOf(option.value);
+            selected.value.splice(i, 1);
+        }
 
-    await nextTick();
+        await nextTick();
 
-    const el = document.getElementById(`${props.id}-selected-${index}`);
-    if (el) {
-        el.focus();
-    } else {
-        document.getElementById(`${props.id}-selected-${index - 1}`)?.focus();
+        const el = document.getElementById(`${props.id}-selected-${index}`);
+        if (el) {
+            el.focus();
+        } else {
+            document.getElementById(`${props.id}-selected-${index - 1}`)?.focus();
+        }
+    }
+}
+
+function onOptionListKeyup(selected: "selected" | "unselected", event: KeyboardEvent) {
+    if (event.key === "Shift") {
+        const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
+        highlightHandler.abortHighlight();
     }
 }
 
@@ -187,6 +216,13 @@ function deselectAll() {
 }
 
 function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent, index: number) {
+    if ([" ", "Enter"].includes(event.key) && (event.shiftKey || event.ctrlKey)) {
+        const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
+        handleHighlight(event, index, highlightHandler);
+        event.preventDefault();
+        return;
+    }
+
     if (!["ArrowUp", "ArrowDown"].includes(event.key)) {
         return;
     }
@@ -266,17 +302,14 @@ const deselectText = computed(() => {
                 class="options-list unselected border-right"
                 tabindex="-1"
                 @keydown.up.down.prevent
-                @keyup.shift="highlightUnselected.abortHighlight()">
+                @keyup="(e) => onOptionListKeyup('unselected', e)">
                 <button
                     v-for="(option, i) in unselectedOptionsFiltered"
                     :id="`${props.id}-unselected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
                     :class="{ highlighted: highlightUnselected.highlightedIndexes.includes(i) }"
-                    @click.shift.exact="highlightUnselected.onRangeHighlight(i)"
-                    @click.shift.ctrl.exact="highlightUnselected.onRangeRemoveHighlight(i)"
-                    @click.ctrl.exact="highlightUnselected.toggleHighlight(i)"
-                    @click.exact="selectOption(i)"
+                    @click="(e) => selectOption(e, i)"
                     @keydown="(e) => optionOnKey('unselected', e, i)">
                     {{ option.label }}
                 </button>
@@ -293,17 +326,20 @@ const deselectText = computed(() => {
                     {{ deselectText }}
                 </BButton>
             </div>
-            <div class="options-list selected" tabindex="-1" @keydown.up.down.prevent>
+
+            <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+            <div
+                class="options-list selected"
+                tabindex="-1"
+                @keydown.up.down.prevent
+                @keyup="(e) => onOptionListKeyup('selected', e)">
                 <button
                     v-for="(option, i) in selectedOptionsFiltered"
                     :id="`${props.id}-selected-${i}`"
                     :key="option.label"
                     :tabindex="i === 0 ? 0 : -1"
                     :class="{ highlighted: highlightSelected.highlightedIndexes.includes(i) }"
-                    @click.shift.exact="highlightSelected.onRangeHighlight(i)"
-                    @click.shift.ctrl.exact="highlightSelected.onRangeRemoveHighlight(i)"
-                    @click.ctrl.exact="highlightSelected.toggleHighlight(i)"
-                    @click.exact="deselectOption(i)"
+                    @click="(e) => deselectOption(e, i)"
                     @keydown="(e) => optionOnKey('selected', e, i)">
                     {{ option.label }}
                 </button>
diff --git a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
index cee6bbed70bf..2be5b64baeff 100644
--- a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
@@ -21,7 +21,7 @@ export function useHighlight(options: Ref<SelectOption[]>) {
 
     let highlightIndexStart = -1;
 
-    const onRangeHighlight = (index: number) => {
+    const rangeHighlight = (index: number) => {
         if (highlightIndexStart === -1) {
             highlightIndexStart = index;
             addHighlight(index);
@@ -38,7 +38,7 @@ export function useHighlight(options: Ref<SelectOption[]>) {
         highlightIndexStart = -1;
     };
 
-    const onRangeRemoveHighlight = (index: number) => {
+    const rangeRemoveHighlight = (index: number) => {
         if (highlightIndexStart === -1) {
             highlightIndexStart = index;
             removeHighlight(index);
@@ -97,8 +97,8 @@ export function useHighlight(options: Ref<SelectOption[]>) {
         highlightedOptions,
         highlightedIndexes,
         reset,
-        onRangeHighlight,
-        onRangeRemoveHighlight,
+        rangeHighlight,
+        rangeRemoveHighlight,
         toggleHighlight,
         abortHighlight,
         addHighlight,

From 4c6e9b76f99d68ba82bf67bef196beb0925c5bd7 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:45:30 +0100
Subject: [PATCH 14/37] add comments decrease worker running debounce time

---
 .../Form/Elements/FormSelectMany/FormSelectMany.vue   | 11 ++++++++++-
 .../Form/Elements/FormSelectMany/useHighlight.ts      |  4 ++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index bec3aa8a5015..611fb687b742 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -66,6 +66,7 @@ const searchRegex = computed(() => {
     }
 });
 
+/** Wraps value prop so it can be set, and always returns an array */
 const selected = computed({
     get() {
         return Array.isArray(props.value) ? props.value : [props.value];
@@ -76,11 +77,14 @@ const selected = computed({
 });
 
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
+/** Tells the worker thread if the search value should be treated as a regex */
 const asRegex = computed(() => searchRegex.value !== null);
 
+// Limits amount of displayed options
 const selectedDisplayCount = ref(500);
 const unselectedDisplayCount = ref(500);
 
+// binding to worker thread
 const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselected, moreSelected } = useSelectMany({
     optionsArray: computed(() => props.options),
     filter: searchValue,
@@ -91,8 +95,10 @@ const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselec
     caseSensitive,
 });
 
-const workerRunning = refDebounced(running, 1000);
+// debounced to it doesn't blink, and only appears when relevant
+const workerRunning = refDebounced(running, 800);
 
+/** generic event handler to handle highlighting of options */
 function handleHighlight(
     event: MouseEvent | KeyboardEvent,
     index: number,
@@ -153,6 +159,7 @@ async function deselectOption(event: MouseEvent, index: number) {
 }
 
 function onOptionListKeyup(selected: "selected" | "unselected", event: KeyboardEvent) {
+    // reset highlight range mode when shift is released
     if (event.key === "Shift") {
         const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
         highlightHandler.abortHighlight();
@@ -216,6 +223,7 @@ function deselectAll() {
 }
 
 function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent, index: number) {
+    // handle highlighting
     if ([" ", "Enter"].includes(event.key) && (event.shiftKey || event.ctrlKey)) {
         const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
         handleHighlight(event, index, highlightHandler);
@@ -229,6 +237,7 @@ function optionOnKey(selected: "selected" | "unselected", event: KeyboardEvent,
 
     event.preventDefault();
 
+    // handle arrow navigation
     const nextIndex = event.key === "ArrowUp" ? index - 1 : index + 1;
     document.getElementById(`${props.id}-${selected}-${nextIndex}`)?.focus();
 }
diff --git a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
index 2be5b64baeff..8feb91eef706 100644
--- a/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/useHighlight.ts
@@ -4,6 +4,10 @@ import { assertDefined } from "@/utils/assertions";
 
 import type { SelectOption } from "./worker/selectMany";
 
+/**
+ * Handles logic required for highlighting options
+ * @param options Array of select options to handle highlighting for
+ */
 export function useHighlight(options: Ref<SelectOption[]>) {
     const highlightedOptions = ref<SelectOption[]>([]);
     const highlightedIndexes = ref<number[]>([]);

From 5e41be19ff4461678419674c0d979e4f75e4f453 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:57:43 +0100
Subject: [PATCH 15/37] move highlight abort to blur

---
 .../Elements/FormSelectMany/FormSelectMany.vue     | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 611fb687b742..677695469e03 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -158,14 +158,6 @@ async function deselectOption(event: MouseEvent, index: number) {
     }
 }
 
-function onOptionListKeyup(selected: "selected" | "unselected", event: KeyboardEvent) {
-    // reset highlight range mode when shift is released
-    if (event.key === "Shift") {
-        const highlightHandler = selected === "selected" ? highlightSelected : highlightUnselected;
-        highlightHandler.abortHighlight();
-    }
-}
-
 function selectAll() {
     if (highlightUnselected.highlightedIndexes.length > 0) {
         const highlightedValues = highlightUnselected.highlightedOptions.map((o) => o.value);
@@ -306,12 +298,11 @@ const deselectText = computed(() => {
                 </BButton>
             </div>
 
-            <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
             <div
                 class="options-list unselected border-right"
                 tabindex="-1"
                 @keydown.up.down.prevent
-                @keyup="(e) => onOptionListKeyup('unselected', e)">
+                @blur="highlightUnselected.abortHighlight">
                 <button
                     v-for="(option, i) in unselectedOptionsFiltered"
                     :id="`${props.id}-unselected-${i}`"
@@ -336,12 +327,11 @@ const deselectText = computed(() => {
                 </BButton>
             </div>
 
-            <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
             <div
                 class="options-list selected"
                 tabindex="-1"
                 @keydown.up.down.prevent
-                @keyup="(e) => onOptionListKeyup('selected', e)">
+                @blur="highlightSelected.abortHighlight">
                 <button
                     v-for="(option, i) in selectedOptionsFiltered"
                     :id="`${props.id}-selected-${i}`"

From 315e92fa41cac5f2a8129fb1d22d2036f8ec2e19 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 11:05:12 +0100
Subject: [PATCH 16/37] make processing indicator more obvious fix show more
 deselect after

---
 .../Elements/FormSelectMany/FormSelectMany.vue  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 677695469e03..bf5687af500b 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -96,7 +96,7 @@ const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselec
 });
 
 // debounced to it doesn't blink, and only appears when relevant
-const workerRunning = refDebounced(running, 800);
+const workerRunning = refDebounced(running, 400);
 
 /** generic event handler to handle highlighting of options */
 function handleHighlight(
@@ -316,7 +316,7 @@ const deselectText = computed(() => {
 
                 <span v-if="moreUnselected" class="show-more-indicator">
                     Limited to {{ unselectedDisplayCount }} options.
-                    <button @click="unselectedDisplayCount += 500">Show more</button>
+                    <button class="show-more-button" @click="unselectedDisplayCount += 500">Show more</button>
                 </span>
             </div>
             <div class="selection-heading px-2">
@@ -345,13 +345,13 @@ const deselectText = computed(() => {
 
                 <span v-if="moreSelected" class="show-more-indicator">
                     Limited to {{ selectedDisplayCount }} options.
-                    <button @click="selectedDisplayCount += 500">Show more</button>
+                    <button class="show-more-button" @click="selectedDisplayCount += 500">Show more</button>
                 </span>
             </div>
         </div>
         <div class="bottom-row-info">
             <span> Shift to highlight range. Ctrl to highlight multiple </span>
-            <span v-if="workerRunning"> Processing... </span>
+            <span v-if="workerRunning" class="working-indicator"> Processing... </span>
         </div>
     </section>
 </template>
@@ -451,11 +451,12 @@ const deselectText = computed(() => {
         padding-left: 0.5rem;
         color: darken($gray-400, 20%);
 
-        button::after {
+        .show-more-button:hover::after,
+        .show-more-button:focus::after {
             content: none;
         }
 
-        button {
+        .show-more-button {
             color: $brand-info;
             text-decoration: underline;
         }
@@ -485,5 +486,9 @@ const deselectText = computed(() => {
     width: 100%;
     display: flex;
     justify-content: space-between;
+
+    .working-indicator {
+        color: $brand-primary;
+    }
 }
 </style>

From f4eb4ce34b947f1e33af3b31272bd3c7ee630d58 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 11:18:44 +0100
Subject: [PATCH 17/37] show amount of options in columns increase default
 display limits to 1000

---
 .../FormSelectMany/FormSelectMany.vue         | 38 +++++++++++++++++--
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index bf5687af500b..3ae761f5c151 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -81,8 +81,8 @@ const regexInvalid = computed(() => useRegex.value && searchRegex.value === null
 const asRegex = computed(() => searchRegex.value !== null);
 
 // Limits amount of displayed options
-const selectedDisplayCount = ref(500);
-const unselectedDisplayCount = ref(500);
+const selectedDisplayCount = ref(1000);
+const unselectedDisplayCount = ref(1000);
 
 // binding to worker thread
 const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselected, moreSelected } = useSelectMany({
@@ -256,6 +256,30 @@ const deselectText = computed(() => {
         return "Deselect filtered";
     }
 });
+
+const unselectedCount = computed(() => {
+    if (searchValue.value === "") {
+        return `${props.options.length - selected.value.length}`;
+    } else {
+        let countString = `${unselectedOptionsFiltered.value.length}`;
+        if (moreUnselected.value) {
+            countString += "+";
+        }
+        return countString;
+    }
+});
+
+const selectedCount = computed(() => {
+    if (searchValue.value === "") {
+        return `${selected.value.length}`;
+    } else {
+        let countString = `${selectedOptionsFiltered.value.length}`;
+        if (moreSelected.value) {
+            countString += "+";
+        }
+        return countString;
+    }
+});
 </script>
 
 <template>
@@ -291,7 +315,10 @@ const deselectText = computed(() => {
 
         <div class="options-box border rounded mt-2">
             <div class="selection-heading border-right px-2">
-                <span>Unselected</span>
+                <span>
+                    Unselected
+                    <span class="font-weight-normal"> ({{ unselectedCount }}) </span>
+                </span>
                 <BButton class="selection-button" :title="selectText" variant="primary" @click="selectAll">
                     {{ selectText }}
                     <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
@@ -320,7 +347,10 @@ const deselectText = computed(() => {
                 </span>
             </div>
             <div class="selection-heading px-2">
-                <span>Selected</span>
+                <span>
+                    Selected
+                    <span class="font-weight-normal"> ({{ selectedCount }}) </span>
+                </span>
                 <BButton class="selection-button" :title="deselectText" variant="primary" @click="deselectAll">
                     <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
                     {{ deselectText }}

From b3260d0acd2244ba36248ecda7e4efb1a2b01e44 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 11:29:12 +0100
Subject: [PATCH 18/37] fix select button text alignment

---
 .../components/Form/Elements/FormSelectMany/FormSelectMany.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 3ae761f5c151..c42299fdb5e7 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -418,6 +418,9 @@ const selectedCount = computed(() => {
         .selection-button {
             height: 20px;
             padding: 0 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
         }
     }
 }

From bf65855062c35c6894176d83ccd57bccf1f8be90 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:20:11 +0100
Subject: [PATCH 19/37] allow for switching and add local preferences

---
 .../FormSelectMany/FormSelectMany.vue         |  4 -
 .../Form/Elements/FormSelection.vue           | 88 +++++++++++++++++--
 client/src/stores/userFlagsStore.ts           |  7 ++
 3 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index c42299fdb5e7..5f669e5c3a45 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -27,10 +27,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    optional: {
-        type: Boolean,
-        default: false,
-    },
     options: {
         type: Array as PropType<Array<SelectOption>>,
         required: true,
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 42d5a762e0d6..5cd7f6f5fceb 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -1,11 +1,21 @@
 <script setup>
-import { computed } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BDropdown, BDropdownItemButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, ref, watch } from "vue";
+
+import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
 import FormCheck from "./FormCheck.vue";
 import FormRadio from "./FormRadio.vue";
 import FormSelect from "./FormSelect.vue";
+import FormSelectMany from "./FormSelectMany/FormSelectMany.vue";
+
+library.add(faCaretDown);
 
-const $emit = defineEmits(["input"]);
+const emit = defineEmits(["input"]);
 const props = defineProps({
     value: {
         default: null,
@@ -37,7 +47,7 @@ const currentValue = computed({
         return props.value;
     },
     set: (val) => {
-        $emit("input", val);
+        emit("input", val);
     },
 });
 
@@ -59,10 +69,76 @@ const currentOptions = computed(() => {
     }
     return result;
 });
+
+const useMany = ref(false);
+
+const showManyButton = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && !useMany.value
+);
+
+const showMultiButton = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && useMany.value
+);
+
+const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
+
+watch(
+    () => preferredFormSelectElement.value,
+    (newValue, oldValue) => {
+        if (oldValue !== undefined) {
+            return;
+        }
+
+        if (newValue === "none") {
+            if (Array.isArray(props.value) && props.value.length >= 15) {
+                useMany.value = true;
+            } else {
+                useMany.value = false;
+            }
+        } else if (newValue === "many") {
+            useMany.value = true;
+        } else {
+            useMany.value = false;
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
-    <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
-    <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
-    <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
+    <div>
+        <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
+        <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
+        <FormSelectMany v-else-if="useMany" v-model="currentValue" :options="currentOptions" />
+        <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
+
+        <div class="d-flex">
+            <button v-if="showManyButton" class="ui-link ml-1" @click="useMany = true">switch to column select</button>
+            <button v-else-if="showMultiButton" class="ui-link ml-1" @click="useMany = false">
+                switch to tag select
+            </button>
+
+            <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
+                <template v-slot:button-content>
+                    <FontAwesomeIcon icon="fa-caret-down"></FontAwesomeIcon>
+                    <span class="sr-only">select element preferences</span>
+                </template>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'none'"
+                    @click="preferredFormSelectElement = 'none'">
+                    No preference
+                </BDropdownItemButton>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'multi'"
+                    @click="preferredFormSelectElement = 'multi'">
+                    Default to tag select
+                </BDropdownItemButton>
+                <BDropdownItemButton
+                    :active="preferredFormSelectElement === 'many'"
+                    @click="preferredFormSelectElement = 'many'">
+                    Default to column select
+                </BDropdownItemButton>
+            </BDropdown>
+        </div>
+    </div>
 </template>
diff --git a/client/src/stores/userFlagsStore.ts b/client/src/stores/userFlagsStore.ts
index 2664e38000d2..a6d52a8d23c9 100644
--- a/client/src/stores/userFlagsStore.ts
+++ b/client/src/stores/userFlagsStore.ts
@@ -2,8 +2,14 @@ import { defineStore } from "pinia";
 
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 
+export type PreferredFormSelect = "none" | "multi" | "many";
+
 export const useUserFlagsStore = defineStore("userFlagsStore", () => {
     const showSelectionQueryBreakWarning = useUserLocalStorage("user-flags-store-show-break-warning", true);
+    const preferredFormSelectElement = useUserLocalStorage(
+        "user-flags-store-preferred-form-select",
+        "none" as PreferredFormSelect
+    );
 
     function ignoreSelectionQueryBreakWarning() {
         showSelectionQueryBreakWarning.value = false;
@@ -12,5 +18,6 @@ export const useUserFlagsStore = defineStore("userFlagsStore", () => {
     return {
         showSelectionQueryBreakWarning,
         ignoreSelectionQueryBreakWarning,
+        preferredFormSelectElement,
     };
 });

From 9b99845cde177702f366364c03de531182583ce5 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:32:59 +0100
Subject: [PATCH 20/37] add condition based on amount of options

---
 client/src/components/Form/Elements/FormSelection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 5cd7f6f5fceb..f807c31dab8c 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -90,7 +90,7 @@ watch(
         }
 
         if (newValue === "none") {
-            if (Array.isArray(props.value) && props.value.length >= 15) {
+            if ((Array.isArray(props.value) && props.value.length >= 15) || props.options.length >= 500) {
                 useMany.value = true;
             } else {
                 useMany.value = false;

From 3071ef5fa5d8198fef556b30d26dd74c97125a7e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:22:22 +0100
Subject: [PATCH 21/37] explicit object return to resolve codeQL false positive

---
 .../worker/selectMany.worker.js               | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index b426f9224e8f..e1babeca7d87 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -2,15 +2,17 @@ import { main } from "./selectManyMain";
 
 // glue code to run `main` in a thread
 
-const createOptions = () => ({
-    optionsArray: [],
-    filter: "",
-    selected: [],
-    unselectedDisplayCount: 1000,
-    selectedDisplayCount: 1000,
-    asRegex: false,
-    caseSensitive: false,
-});
+const createOptions = () => {
+    return {
+        optionsArray: [],
+        filter: "",
+        selected: [],
+        unselectedDisplayCount: 1000,
+        selectedDisplayCount: 1000,
+        asRegex: false,
+        caseSensitive: false,
+    };
+};
 
 const optionsById = {};
 const timerById = {};

From d7f948090cb5d572ab346ebe14849c1fc212ce74 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:33:44 +0100
Subject: [PATCH 22/37] add testing pinia to FormSelect test

---
 client/src/components/Form/Elements/FormSelect.test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.js
index 5d662edf7a50..1854a23698ac 100644
--- a/client/src/components/Form/Elements/FormSelect.test.js
+++ b/client/src/components/Form/Elements/FormSelect.test.js
@@ -1,3 +1,4 @@
+import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
@@ -6,9 +7,12 @@ import MountTarget from "./FormSelection.vue";
 const localVue = getLocalVue(true);
 
 function createTarget(propsData) {
+    const pinia = createTestingPinia();
+
     return mount(MountTarget, {
         localVue,
         propsData,
+        pinia,
     });
 }
 

From fc48edca5dbfec7c403b102ce24615d4c293cbaf Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 15:42:06 +0100
Subject: [PATCH 23/37] replace object with map to fix codeQl warning

---
 .../FormSelectMany/worker/selectMany.worker.js         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index e1babeca7d87..bae4faf9a5f4 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -14,17 +14,17 @@ const createOptions = () => {
     };
 };
 
-const optionsById = {};
+const optionsById = new Map();
 const timerById = {};
 
 self.addEventListener("message", (e) => {
     const message = e.data;
 
-    if (!(message.id in optionsById)) {
-        optionsById[message.id] = createOptions();
+    if (optionsById.has(message.id)) {
+        optionsById.set(message.id, createOptions());
     }
 
-    const options = optionsById[message.id];
+    const options = optionsById.get(message.id);
 
     switch (message.type) {
         case "setArray":
@@ -47,7 +47,7 @@ self.addEventListener("message", (e) => {
             break;
 
         case "clear":
-            delete optionsById[message.id];
+            optionsById.delete(message.id);
             return;
 
         default:

From 77e6fe99a9da721eaa7d07709d93f2bcba177a95 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:00:01 +0100
Subject: [PATCH 24/37] undo filter composable changes

---
 client/src/composables/filter/filter.d.ts     |  4 +--
 client/src/composables/filter/filter.js       | 10 -------
 .../src/composables/filter/filter.worker.js   |  5 +---
 .../src/composables/filter/filterFunction.ts  | 26 +++----------------
 4 files changed, 5 insertions(+), 40 deletions(-)

diff --git a/client/src/composables/filter/filter.d.ts b/client/src/composables/filter/filter.d.ts
index f629299ab34d..6efd44fb92d3 100644
--- a/client/src/composables/filter/filter.d.ts
+++ b/client/src/composables/filter/filter.d.ts
@@ -7,11 +7,9 @@ import type { Ref } from "vue";
  * @param array array of objects to filter
  * @param filter string to filter by
  * @param objectFields string array of fields to filter by on each object
- * @param asRegex when true, treats the filter as an regex. defaults to false
  */
 export declare function useFilterObjectArray<O extends object, K extends keyof O>(
     array: MaybeRefOrGetter<Array<O>>,
     filter: MaybeRefOrGetter<string>,
-    objectFields: MaybeRefOrGetter<Array<K>>,
-    asRegex: MaybeRefOrGetter<boolean> = false
+    objectFields: MaybeRefOrGetter<Array<K>>
 ): Ref<O[]>;
diff --git a/client/src/composables/filter/filter.js b/client/src/composables/filter/filter.js
index a8d7bc2d67de..15f630150a84 100644
--- a/client/src/composables/filter/filter.js
+++ b/client/src/composables/filter/filter.js
@@ -41,16 +41,6 @@ export function useFilterObjectArray(array, filter, objectFields, asRegex = fals
         }
     );
 
-    watch(
-        () => toValue(asRegex),
-        (r) => {
-            post({ type: "setAsRegex", asRegex: r });
-        },
-        {
-            immediate: true,
-        }
-    );
-
     worker.onmessage = (e) => {
         const message = e.data;
 
diff --git a/client/src/composables/filter/filter.worker.js b/client/src/composables/filter/filter.worker.js
index f66134b0db58..470bf897de5b 100644
--- a/client/src/composables/filter/filter.worker.js
+++ b/client/src/composables/filter/filter.worker.js
@@ -3,7 +3,6 @@ import { runFilter } from "@/composables/filter/filterFunction";
 let array = [];
 let filter = "";
 let fields = [];
-let asRegex = false;
 
 self.addEventListener("message", (e) => {
     const message = e.data;
@@ -14,12 +13,10 @@ self.addEventListener("message", (e) => {
         fields = message.fields;
     } else if (message.type === "setFilter") {
         filter = message.filter;
-    } else if (message.type === "setAsRegex") {
-        asRegex = message.asRegex;
     }
 
     if (array.length > 0 && fields.length > 0) {
-        const filtered = runFilter(filter, array, fields, asRegex);
+        const filtered = runFilter(filter, array, fields);
         self.postMessage({ type: "result", filtered });
     }
 });
diff --git a/client/src/composables/filter/filterFunction.ts b/client/src/composables/filter/filterFunction.ts
index 480bf43fdabe..be92ad46b162 100644
--- a/client/src/composables/filter/filterFunction.ts
+++ b/client/src/composables/filter/filterFunction.ts
@@ -1,14 +1,4 @@
-export function runFilter<O extends object, K extends keyof O>(f: string, arr: O[], fields: K[], asRegex = false) {
-    let regex: RegExp | null = null;
-
-    if (asRegex) {
-        try {
-            regex = new RegExp(f);
-        } catch (e) {
-            // ignore
-        }
-    }
-
+export function runFilter<O extends object, K extends keyof O>(f: string, arr: O[], fields: K[]) {
     if (f === "") {
         return arr;
     } else {
@@ -17,21 +7,11 @@ export function runFilter<O extends object, K extends keyof O>(f: string, arr: O
                 const val = obj[field];
 
                 if (typeof val === "string") {
-                    if (regex) {
-                        return val.match(regex);
-                    } else if (val.toLowerCase().includes(f.toLocaleLowerCase())) {
+                    if (val.toLowerCase().includes(f.toLocaleLowerCase())) {
                         return true;
                     }
                 } else if (Array.isArray(val)) {
-                    if (regex) {
-                        return val.some((v) => {
-                            if (typeof v === "string") {
-                                return v.match(regex!);
-                            } else {
-                                return false;
-                            }
-                        });
-                    } else if (val.includes(f)) {
+                    if (val.includes(f)) {
                         return true;
                     }
                 }

From 7d42a1453c3389fc035eac19a38b915ee9ff2479 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:06:55 +0100
Subject: [PATCH 25/37] pass regex instead of reconstructing

---
 .../FormSelectMany/FormSelectMany.vue         | 23 ++++---------------
 .../FormSelectMany/worker/filterOptions.ts    | 18 +++++----------
 .../FormSelectMany/worker/selectMany.d.ts     |  3 +--
 .../FormSelectMany/worker/selectMany.js       |  2 --
 .../worker/selectMany.worker.js               |  4 +---
 .../FormSelectMany/worker/selectManyMain.ts   | 18 +--------------
 6 files changed, 14 insertions(+), 54 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 5f669e5c3a45..e76308fcafe0 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -73,21 +73,20 @@ const selected = computed({
 });
 
 const regexInvalid = computed(() => useRegex.value && searchRegex.value === null);
-/** Tells the worker thread if the search value should be treated as a regex */
-const asRegex = computed(() => searchRegex.value !== null);
 
 // Limits amount of displayed options
 const selectedDisplayCount = ref(1000);
 const unselectedDisplayCount = ref(1000);
 
+const filter = computed(() => searchRegex.value ?? searchValue.value);
+
 // binding to worker thread
 const { unselectedOptionsFiltered, selectedOptionsFiltered, running, moreUnselected, moreSelected } = useSelectMany({
     optionsArray: computed(() => props.options),
-    filter: searchValue,
+    filter,
     selected,
     selectedDisplayCount,
     unselectedDisplayCount,
-    asRegex,
     caseSensitive,
 });
 
@@ -166,13 +165,7 @@ function selectAll() {
 
         unselectedOptionsFiltered.value = [];
     } else {
-        const filteredValues = filterOptions(
-            props.options,
-            searchValue.value,
-            asRegex.value,
-            caseSensitive.value,
-            searchRegex.value
-        ).map((o) => o.value);
+        const filteredValues = filterOptions(props.options, filter.value, caseSensitive.value).map((o) => o.value);
 
         const selectedSet = new Set([...selected.value, ...filteredValues]);
         selected.value = Array.from(selectedSet);
@@ -195,13 +188,7 @@ function deselectAll() {
         selectedOptionsFiltered.value = [];
     } else {
         const selectedSet = new Set(selected.value);
-        const filteredValues = filterOptions(
-            props.options,
-            searchValue.value,
-            asRegex.value,
-            caseSensitive.value,
-            searchRegex.value
-        ).map((o) => o.value);
+        const filteredValues = filterOptions(props.options, filter.value, caseSensitive.value).map((o) => o.value);
 
         filteredValues.forEach((v) => selectedSet.delete(v));
         selected.value = Array.from(selectedSet);
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
index fe4a6486d35a..6c3c26f3a38c 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/filterOptions.ts
@@ -1,21 +1,15 @@
 import { SelectOption } from "./selectMany";
 
-export function filterOptions(
-    options: SelectOption[],
-    filterString: string,
-    asRegex: boolean,
-    caseSensitive: boolean,
-    filterRegex?: RegExp | null
-) {
+export function filterOptions(options: SelectOption[], filter: string | RegExp, caseSensitive: boolean) {
     let filteredSelectOptions;
 
-    if (asRegex && filterRegex) {
-        filteredSelectOptions = options.filter((option) => Boolean(option.label.match(filterRegex!)));
+    if (filter instanceof RegExp) {
+        filteredSelectOptions = options.filter((option) => Boolean(option.label.match(filter)));
     } else if (caseSensitive) {
-        filteredSelectOptions = options.filter((option) => option.label.includes(filterString));
+        filteredSelectOptions = options.filter((option) => option.label.includes(filter));
     } else {
-        const filter = filterString.toLowerCase();
-        filteredSelectOptions = options.filter((option) => option.label.toLowerCase().includes(filter));
+        const filterLowercase = filter.toLowerCase();
+        filteredSelectOptions = options.filter((option) => option.label.toLowerCase().includes(filterLowercase));
     }
 
     return filteredSelectOptions;
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
index 48cfa6a4989f..3f3ebf146dde 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.d.ts
@@ -9,11 +9,10 @@ export interface SelectOption {
 
 export interface UseSelectManyOptions {
     optionsArray: Ref<SelectOption[]>;
-    filter: Ref<string>;
+    filter: Ref<string | RegExp>;
     selected: Ref<SelectValue[]>;
     unselectedDisplayCount: Ref<number>;
     selectedDisplayCount: Ref<number>;
-    asRegex: Ref<boolean>;
     caseSensitive: Ref<boolean>;
 }
 
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index b6c041a922bd..7b0bdbdb28d5 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -12,7 +12,6 @@ export function useSelectMany({
     selected,
     unselectedDisplayCount,
     selectedDisplayCount,
-    asRegex,
     caseSensitive,
 }) {
     // only start a single worker
@@ -63,7 +62,6 @@ export function useSelectMany({
             type: "setSettings",
             unselectedDisplayCount: unselectedDisplayCount.value,
             selectedDisplayCount: selectedDisplayCount.value,
-            asRegex: asRegex.value,
             caseSensitive: caseSensitive.value,
         });
     });
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
index bae4faf9a5f4..6eaed4c7638d 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.worker.js
@@ -9,7 +9,6 @@ const createOptions = () => {
         selected: [],
         unselectedDisplayCount: 1000,
         selectedDisplayCount: 1000,
-        asRegex: false,
         caseSensitive: false,
     };
 };
@@ -20,7 +19,7 @@ const timerById = {};
 self.addEventListener("message", (e) => {
     const message = e.data;
 
-    if (optionsById.has(message.id)) {
+    if (!optionsById.has(message.id)) {
         optionsById.set(message.id, createOptions());
     }
 
@@ -42,7 +41,6 @@ self.addEventListener("message", (e) => {
         case "setSettings":
             options.unselectedDisplayCount = message.unselectedDisplayCount;
             options.selectedDisplayCount = message.selectedDisplayCount;
-            options.asRegex = message.asRegex;
             options.caseSensitive = message.caseSensitive;
             break;
 
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 0f90b8f5094d..2d8ea95b23ed 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -7,23 +7,7 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
     const unselectedOptionsFiltered: SelectOption[] = [];
     const selectedOptionsFiltered: SelectOption[] = [];
 
-    let filterRegex: RegExp | undefined;
-
-    if (options.asRegex) {
-        try {
-            filterRegex = new RegExp(options.filter, options.caseSensitive ? undefined : "i");
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    const filteredSelectOptions = filterOptions(
-        options.optionsArray,
-        options.filter,
-        options.asRegex,
-        options.caseSensitive,
-        filterRegex
-    );
+    const filteredSelectOptions = filterOptions(options.optionsArray, options.filter, options.caseSensitive);
 
     const selectedValues = options.selected.map(stringifyObject);
 

From 3ffa1d1c9300f67507ec927a02dc9a3493ec2cc8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 16:17:13 +0100
Subject: [PATCH 26/37] greatly improve performance by using a Set

---
 .../Form/Elements/FormSelectMany/worker/selectManyMain.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
index 2d8ea95b23ed..0a35d9e04223 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectManyMain.ts
@@ -9,7 +9,7 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
 
     const filteredSelectOptions = filterOptions(options.optionsArray, options.filter, options.caseSensitive);
 
-    const selectedValues = options.selected.map(stringifyObject);
+    const selectedValues = new Set(options.selected.map(stringifyObject));
 
     let moreUnselected = false;
     let moreSelected = false;
@@ -19,7 +19,7 @@ export function main(options: UnwrapNestedRefs<UseSelectManyOptions>): UnwrapNes
 
         const value = stringifyObject(option.value);
 
-        const isSelected = selectedValues.includes(value);
+        const isSelected = selectedValues.has(value);
 
         if (
             unselectedOptionsFiltered.length > options.unselectedDisplayCount &&

From 1f82d87f9d03c4bac0be3fe293b8a7c08dceff13 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:42:34 +0100
Subject: [PATCH 27/37] fix axe violation

---
 .../Form/Elements/FormSelectMany/FormSelectMany.vue           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index e76308fcafe0..72521fb0c341 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -279,7 +279,7 @@ const selectedCount = computed(() => {
                     class="toggle-button"
                     :variant="caseSensitive ? 'primary' : 'outline-primary'"
                     role="switch"
-                    :aria-checked="caseSensitive"
+                    :aria-checked="`${caseSensitive}`"
                     title="case sensitive"
                     @click="caseSensitive = !caseSensitive">
                     Aa
@@ -288,7 +288,7 @@ const selectedCount = computed(() => {
                     class="toggle-button"
                     :variant="useRegex ? 'primary' : 'outline-primary'"
                     role="switch"
-                    :aria-checked="useRegex"
+                    :aria-checked="`${useRegex}`"
                     title="use regex"
                     @click="useRegex = !useRegex">
                     .*

From 68215e3b835e1ff63db7d307869b57cdf38932f2 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 21 Nov 2023 18:43:49 +0100
Subject: [PATCH 28/37] rename tag select to simple select

---
 client/src/components/Form/Elements/FormSelection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index f807c31dab8c..e9466445b639 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -115,7 +115,7 @@ watch(
         <div class="d-flex">
             <button v-if="showManyButton" class="ui-link ml-1" @click="useMany = true">switch to column select</button>
             <button v-else-if="showMultiButton" class="ui-link ml-1" @click="useMany = false">
-                switch to tag select
+                switch to simple select
             </button>
 
             <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
@@ -131,7 +131,7 @@ watch(
                 <BDropdownItemButton
                     :active="preferredFormSelectElement === 'multi'"
                     @click="preferredFormSelectElement = 'multi'">
-                    Default to tag select
+                    Default to simple select
                 </BDropdownItemButton>
                 <BDropdownItemButton
                     :active="preferredFormSelectElement === 'many'"

From 8edd24546c1072dcf29925998160d72faff0ac79 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Nov 2023 13:13:34 +0100
Subject: [PATCH 29/37] fix horizontal scroll bar on chromium browsers

---
 .../components/Form/Elements/FormSelectMany/FormSelectMany.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 72521fb0c341..b770d874a661 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -409,7 +409,7 @@ const selectedCount = computed(() => {
 }
 
 .options-list {
-    overflow: scroll;
+    overflow-y: scroll;
     display: flex;
     flex-direction: column;
 

From 0575855ffa727a310987ac9ce95460dff55b4357 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Nov 2023 13:15:25 +0100
Subject: [PATCH 30/37] only useMany when multiple is an option

---
 .../Form/Elements/FormSelection.vue           | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index e9466445b639..ca328723e6b0 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -72,14 +72,6 @@ const currentOptions = computed(() => {
 
 const useMany = ref(false);
 
-const showManyButton = computed(
-    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && !useMany.value
-);
-
-const showMultiButton = computed(
-    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && useMany.value
-);
-
 const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
 
 watch(
@@ -103,13 +95,23 @@ watch(
     },
     { immediate: true }
 );
+
+const displayMany = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && useMany.value
+);
+
+const showManyButton = computed(
+    () => props.multiple && props.display !== "checkboxes" && props.display !== "radio" && !useMany.value
+);
+
+const showMultiButton = computed(() => displayMany.value);
 </script>
 
 <template>
     <div>
         <FormCheck v-if="display === 'checkboxes'" v-model="currentValue" :options="currentOptions" />
         <FormRadio v-else-if="display === 'radio'" v-model="currentValue" :options="currentOptions" />
-        <FormSelectMany v-else-if="useMany" v-model="currentValue" :options="currentOptions" />
+        <FormSelectMany v-else-if="displayMany" v-model="currentValue" :options="currentOptions" />
         <FormSelect v-else v-model="currentValue" :multiple="multiple" :optional="optional" :options="currentOptions" />
 
         <div class="d-flex">

From da46e69263697b4d13caee9d5f468166a0a81e15 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 22 Nov 2023 14:01:51 +0100
Subject: [PATCH 31/37] remove event listener in cleanup code

---
 .../Form/Elements/FormSelectMany/worker/selectMany.js      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
index 7b0bdbdb28d5..485e55bd23fc 100644
--- a/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/selectMany.js
@@ -42,6 +42,7 @@ export function useSelectMany({
             worker = null;
         } else {
             post({ type: "clear" });
+            worker.removeEventListener("message", onMessage);
         }
     });
 
@@ -66,7 +67,7 @@ export function useSelectMany({
         });
     });
 
-    worker.addEventListener("message", (e) => {
+    const onMessage = (e) => {
         const message = e.data;
 
         if (message.id !== id) {
@@ -80,7 +81,9 @@ export function useSelectMany({
             moreUnselected.value = message.moreUnselected;
             running.value = false;
         }
-    });
+    };
+
+    worker.addEventListener("message", onMessage);
 
     return {
         unselectedOptionsFiltered,

From d20bd8c461e44ca16ccfddd33362b3541feb7e03 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 23 Nov 2023 15:25:17 +0100
Subject: [PATCH 32/37] add test cases

---
 .../FormSelectMany/FormSelectMany.test.ts     | 348 ++++++++++++++++++
 .../FormSelectMany/FormSelectMany.vue         |  17 +-
 .../worker/__mocks__/selectMany.ts            |  37 ++
 3 files changed, 394 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
 create mode 100644 client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
new file mode 100644
index 000000000000..6e5db7a7f12f
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
@@ -0,0 +1,348 @@
+import "./worker/__mocks__/selectMany";
+
+import { createTestingPinia } from "@pinia/testing";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+import { PropType } from "vue";
+
+import { wait } from "@/utils/utils";
+
+import type { SelectOption } from "./worker/selectMany";
+
+import FormSelectMany from "./FormSelectMany.vue";
+
+const pinia = createTestingPinia();
+const localVue = getLocalVue();
+
+jest.mock("@/components/Form/Elements/FormSelectMany/worker/selectMany");
+
+function mountSelectMany(props: Partial<PropType<typeof FormSelectMany>>) {
+    return mount(FormSelectMany as any, {
+        propsData: { options: [], value: [], ...props },
+        pinia,
+        localVue,
+    });
+}
+
+const selectors = {
+    unselectedOptions: ".options-list.unselected > button",
+    unselectedHighlighted: ".options-list.unselected > button.highlighted",
+    selectedOptions: ".options-list:not(.unselected) > button",
+    selectedHighlighted: ".options-list:not(.unselected) > button.highlighted",
+    selectAll: ".selection-button.select",
+    deselectAll: ".selection-button.deselect",
+    selectedCount: ".selected-count",
+    unselectedCount: ".unselected-count",
+    search: ".select-many-search",
+    caseSensitivity: ".toggle-button.case-sensitivity",
+    useRegex: ".toggle-button.use-regex",
+} as const;
+
+function generateOptionsFromArrays(matrix: Array<Array<string>>): SelectOption[] {
+    const combineTwo = (a: string[], b: string[]) => {
+        const combined = [] as string[];
+
+        a.forEach((aValue) => {
+            b.forEach((bValue) => {
+                combined.push(`${aValue}${bValue}`);
+            });
+        });
+
+        return combined;
+    };
+
+    const combined = matrix.reduce((accumulator, current) => combineTwo(accumulator, current), [""]);
+
+    return combined.map((v) => ({ label: v, value: v }));
+}
+
+/** gets the latest input event value and reflects it to props */
+async function emittedInput(wrapper: ReturnType<typeof mountSelectMany>) {
+    const emittedEvents = wrapper.emitted()?.["input"];
+
+    if (!emittedEvents) {
+        return undefined;
+    }
+
+    const latestValue = emittedEvents[emittedEvents.length - 1]?.[0];
+
+    if (latestValue === undefined) {
+        return undefined;
+    }
+
+    await wrapper.setProps({ ...wrapper.props(), value: latestValue });
+    return latestValue;
+}
+
+async function search(wrapper: ReturnType<typeof mountSelectMany>, value: string) {
+    const searchInput = wrapper.find(selectors.search);
+    await searchInput.setValue(value);
+    await wait(310); // outwait input debounce
+}
+
+describe("FormSelectMany", () => {
+    it("displays all options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+        expect(unselectedOptions.length).toBe(6);
+
+        options.forEach((option, i) => {
+            expect(unselectedOptions.at(i).text()).toBe(option.label);
+        });
+    });
+
+    it("emits selected options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+
+        const wrapper = mountSelectMany({ options });
+
+        {
+            const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+            await firstOption.trigger("click");
+
+            const emitted = await emittedInput(wrapper);
+            expect(emitted).toEqual(["foo@galaxy.com"]);
+        }
+
+        {
+            const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+            await firstOption.trigger("click");
+
+            const emitted = await emittedInput(wrapper);
+            expect(emitted).toEqual(["foo@galaxy.com", "foo@galaxy.org"]);
+        }
+    });
+
+    it("displays selected values in the selected column", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(2);
+            expect(selectedOptions.at(0).text()).toBe("foo@galaxy.com");
+            expect(selectedOptions.at(1).text()).toBe("foo@galaxy.org");
+
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            unselectedOptions.wrappers.forEach((unselectedOption) => {
+                expect(unselectedOption.text()).not.toBe("foo@galaxy.com");
+                expect(unselectedOption.text()).not.toBe("foo@galaxy.org");
+            });
+        }
+
+        const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+        await firstOption.trigger("click");
+        const emitted = await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(3);
+            expect(selectedOptions.at(2).text()).toBe(emitted[2]);
+
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            unselectedOptions.wrappers.forEach((unselectedOption) => {
+                expect(unselectedOption.text()).not.toBe(emitted[2]);
+            });
+        }
+    });
+
+    it("shows the amount to selected options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        {
+            const selectedCount = wrapper.find(selectors.selectedCount);
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+
+            expect(selectedCount.text()).toBe("(2)");
+            expect(unselectedCount.text()).toBe("(4)");
+        }
+
+        const firstOption = wrapper.findAll(selectors.unselectedOptions).at(0);
+        await firstOption.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedCount = wrapper.find(selectors.selectedCount);
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+
+            expect(selectedCount.text()).toBe("(3)");
+            expect(unselectedCount.text()).toBe("(3)");
+        }
+    });
+
+    it("selects all options", async () => {
+        const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+
+            expect(unselectedOptions.length).toBe(0);
+            expect(selectedOptions.length).toBe(6);
+        }
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+
+            expect(unselectedOptions.length).toBe(6);
+            expect(selectedOptions.length).toBe(0);
+        }
+    });
+
+    it("filters options", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        await search(wrapper, "bar");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+
+            const unselectedCount = wrapper.find(selectors.unselectedCount);
+            expect(unselectedCount.text()).toBe("(2)");
+        }
+
+        const caseSensitivityButton = wrapper.find(selectors.caseSensitivity);
+        await caseSensitivityButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(0);
+        }
+
+        await search(wrapper, "BAR");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+        }
+
+        const useRegexButton = wrapper.find(selectors.useRegex);
+        await useRegexButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(2);
+        }
+
+        await search(wrapper, "^[a-z]+@");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(4);
+        }
+
+        await caseSensitivityButton.trigger("click");
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(6);
+        }
+    });
+
+    it("selects filtered", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        await search(wrapper, "bar");
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        await search(wrapper, "");
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(2);
+        }
+
+        await search(wrapper, ".org");
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        await search(wrapper, "");
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(1);
+        }
+    });
+
+    it("allows for highlighting ranges", async () => {
+        const options = generateOptionsFromArrays([["foo", "BAR", "baz", "bar"], ["@"], ["galaxy"], [".com", ".org"]]);
+        const wrapper = mountSelectMany({ options });
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            await unselectedOptions.at(0).trigger("click", { shiftKey: true });
+            await unselectedOptions.at(7).trigger("click", { shiftKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.unselectedHighlighted);
+                expect(highlightedOptions.length).toBe(8);
+            }
+
+            await unselectedOptions.at(1).trigger("click", { ctrlKey: true });
+            await unselectedOptions.at(2).trigger("click", { ctrlKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.unselectedHighlighted);
+                expect(highlightedOptions.length).toBe(6);
+            }
+        }
+
+        const selectAllButton = wrapper.find(selectors.selectAll);
+        await selectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(6);
+
+            await selectedOptions.at(0).trigger("click", { shiftKey: true });
+            await selectedOptions.at(5).trigger("click", { shiftKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.selectedHighlighted);
+                expect(highlightedOptions.length).toBe(6);
+            }
+
+            await selectedOptions.at(2).trigger("click", { shiftKey: true, ctrlKey: true });
+            await selectedOptions.at(5).trigger("click", { shiftKey: true, ctrlKey: true });
+
+            {
+                const highlightedOptions = wrapper.findAll(selectors.selectedHighlighted);
+                expect(highlightedOptions.length).toBe(2);
+            }
+        }
+
+        const deselectAllButton = wrapper.find(selectors.deselectAll);
+        await deselectAllButton.trigger("click");
+        await emittedInput(wrapper);
+
+        {
+            const unselectedOptions = wrapper.findAll(selectors.unselectedOptions);
+            expect(unselectedOptions.length).toBe(4);
+
+            const selectedOptions = wrapper.findAll(selectors.selectedOptions);
+            expect(selectedOptions.length).toBe(4);
+        }
+    });
+});
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index b770d874a661..da8418126dcf 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -115,7 +115,7 @@ async function selectOption(event: MouseEvent, index: number): Promise<void> {
         const [option] = unselectedOptionsFiltered.value.splice(index, 1);
 
         if (option) {
-            selected.value.push(option.value);
+            selected.value = [...selected.value, option.value];
         }
 
         // select the element which now is where the removed element just was
@@ -139,7 +139,7 @@ async function deselectOption(event: MouseEvent, index: number) {
 
         if (option) {
             const i = selected.value.indexOf(option.value);
-            selected.value.splice(i, 1);
+            selected.value = selected.value.flatMap((value, index) => (index === i ? [] : [value]));
         }
 
         await nextTick();
@@ -270,13 +270,14 @@ const selectedCount = computed(() => {
         <BInputGroup>
             <BFormInput
                 v-model="searchValue"
+                class="select-many-search"
                 :state="regexInvalid ? false : undefined"
                 :debounce="300"
                 :placeholder="props.placeholder"></BFormInput>
 
             <template v-slot:append>
                 <BButton
-                    class="toggle-button"
+                    class="toggle-button case-sensitivity"
                     :variant="caseSensitive ? 'primary' : 'outline-primary'"
                     role="switch"
                     :aria-checked="`${caseSensitive}`"
@@ -285,7 +286,7 @@ const selectedCount = computed(() => {
                     Aa
                 </BButton>
                 <BButton
-                    class="toggle-button"
+                    class="toggle-button use-regex"
                     :variant="useRegex ? 'primary' : 'outline-primary'"
                     role="switch"
                     :aria-checked="`${useRegex}`"
@@ -300,9 +301,9 @@ const selectedCount = computed(() => {
             <div class="selection-heading border-right px-2">
                 <span>
                     Unselected
-                    <span class="font-weight-normal"> ({{ unselectedCount }}) </span>
+                    <span class="font-weight-normal unselected-count"> ({{ unselectedCount }}) </span>
                 </span>
-                <BButton class="selection-button" :title="selectText" variant="primary" @click="selectAll">
+                <BButton class="selection-button select" :title="selectText" variant="primary" @click="selectAll">
                     {{ selectText }}
                     <FontAwesomeIcon icon="fa-long-arrow-alt-right" />
                 </BButton>
@@ -332,9 +333,9 @@ const selectedCount = computed(() => {
             <div class="selection-heading px-2">
                 <span>
                     Selected
-                    <span class="font-weight-normal"> ({{ selectedCount }}) </span>
+                    <span class="font-weight-normal selected-count"> ({{ selectedCount }}) </span>
                 </span>
-                <BButton class="selection-button" :title="deselectText" variant="primary" @click="deselectAll">
+                <BButton class="selection-button deselect" :title="deselectText" variant="primary" @click="deselectAll">
                     <FontAwesomeIcon icon="fa-long-arrow-alt-left" />
                     {{ deselectText }}
                 </BButton>
diff --git a/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts b/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts
new file mode 100644
index 000000000000..d040fb824da8
--- /dev/null
+++ b/client/src/components/Form/Elements/FormSelectMany/worker/__mocks__/selectMany.ts
@@ -0,0 +1,37 @@
+import { reactive, ref, watch } from "vue";
+
+import type { SelectOption, useSelectMany as UseSelectMany } from "../selectMany";
+import { main } from "../selectManyMain";
+
+jest.mock("@/components/Form/Elements/FormSelectMany/worker/selectMany", () => ({
+    useSelectMany,
+}));
+
+export const useSelectMany: typeof UseSelectMany = (options) => {
+    const unselectedOptionsFiltered = ref([] as SelectOption[]);
+    const selectedOptionsFiltered = ref([] as SelectOption[]);
+    const moreSelected = ref(false);
+    const moreUnselected = ref(false);
+    const running = ref(false);
+
+    watch(
+        [...Object.values(options)],
+        () => {
+            const result = main(reactive(options));
+
+            unselectedOptionsFiltered.value = result.unselectedOptionsFiltered;
+            selectedOptionsFiltered.value = result.selectedOptionsFiltered;
+            moreSelected.value = result.moreSelected;
+            moreUnselected.value = result.moreUnselected;
+        },
+        { immediate: true }
+    );
+
+    return {
+        unselectedOptionsFiltered,
+        selectedOptionsFiltered,
+        moreSelected,
+        moreUnselected,
+        running,
+    };
+};

From 89a7d31537e48bef878463852277085fc8cb7853 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 24 Nov 2023 12:59:01 +0100
Subject: [PATCH 33/37] fix typo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../Form/Elements/FormSelectMany/FormSelectMany.test.ts         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
index 6e5db7a7f12f..6abcf9e13954 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
@@ -148,7 +148,7 @@ describe("FormSelectMany", () => {
         }
     });
 
-    it("shows the amount to selected options", async () => {
+    it("shows the amount of selected options", async () => {
         const options = generateOptionsFromArrays([["foo", "bar", "baz"], ["@"], ["galaxy"], [".com", ".org"]]);
         const wrapper = mountSelectMany({ options, value: ["foo@galaxy.com", "foo@galaxy.org"] });
 

From 67120a038cf36ffb888f266a96c333eace2b228b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:02:24 +0100
Subject: [PATCH 34/37] use fake timers instead of waiting for debounce

---
 .../Form/Elements/FormSelectMany/FormSelectMany.test.ts    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
index 6abcf9e13954..6db9aabe065a 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
@@ -5,8 +5,6 @@ import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
 import { PropType } from "vue";
 
-import { wait } from "@/utils/utils";
-
 import type { SelectOption } from "./worker/selectMany";
 
 import FormSelectMany from "./FormSelectMany.vue";
@@ -74,10 +72,13 @@ async function emittedInput(wrapper: ReturnType<typeof mountSelectMany>) {
     return latestValue;
 }
 
+// circumvent input debounce
+jest.useFakeTimers();
+
 async function search(wrapper: ReturnType<typeof mountSelectMany>, value: string) {
     const searchInput = wrapper.find(selectors.search);
     await searchInput.setValue(value);
-    await wait(310); // outwait input debounce
+    jest.runAllTimers();
 }
 
 describe("FormSelectMany", () => {

From d99d52a2c2210c45b89ae872f1f791d263ae72d2 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:07:01 +0100
Subject: [PATCH 35/37] move option focus to function

---
 .../FormSelectMany/FormSelectMany.vue         | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index da8418126dcf..472884079648 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -108,6 +108,16 @@ function handleHighlight(
     }
 }
 
+/** focus option at given index, or previous option if that doesn't exist */
+function focusOptionAtIndex(selected: "selected" | "unselected", index: number) {
+    const el = document.getElementById(`${props.id}-${selected}-${index}`);
+    if (el) {
+        el.focus();
+    } else {
+        document.getElementById(`${props.id}-${selected}-${index - 1}`)?.focus();
+    }
+}
+
 async function selectOption(event: MouseEvent, index: number): Promise<void> {
     if (event.shiftKey || event.ctrlKey) {
         handleHighlight(event, index, highlightUnselected);
@@ -121,13 +131,7 @@ async function selectOption(event: MouseEvent, index: number): Promise<void> {
         // select the element which now is where the removed element just was
         // to improve keyboard navigation
         await nextTick();
-
-        const el = document.getElementById(`${props.id}-unselected-${index}`);
-        if (el) {
-            el.focus();
-        } else {
-            document.getElementById(`${props.id}-unselected-${index - 1}`)?.focus();
-        }
+        focusOptionAtIndex("unselected", index);
     }
 }
 
@@ -143,13 +147,7 @@ async function deselectOption(event: MouseEvent, index: number) {
         }
 
         await nextTick();
-
-        const el = document.getElementById(`${props.id}-selected-${index}`);
-        if (el) {
-            el.focus();
-        } else {
-            document.getElementById(`${props.id}-selected-${index - 1}`)?.focus();
-        }
+        focusOptionAtIndex("selected", index);
     }
 }
 

From 4c9d7b88a9e4ceb9f8ccb94ef094fb45b82cb1b3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:49:21 +0100
Subject: [PATCH 36/37] add clear button

---
 .../FormSelectMany/FormSelectMany.test.ts     |   2 +-
 .../FormSelectMany/FormSelectMany.vue         | 115 ++++++++++++------
 2 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
index 6db9aabe065a..12f36bdf55ef 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.test.ts
@@ -31,7 +31,7 @@ const selectors = {
     deselectAll: ".selection-button.deselect",
     selectedCount: ".selected-count",
     unselectedCount: ".unselected-count",
-    search: ".select-many-search",
+    search: "input[type=search]",
     caseSensitivity: ".toggle-button.case-sensitivity",
     useRegex: ".toggle-button.use-regex",
 } as const;
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 472884079648..887bde0ae6f7 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faLongArrowAltLeft, faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
+import { faLongArrowAltLeft, faLongArrowAltRight, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { refDebounced } from "@vueuse/core";
-import { BButton, BFormInput, BInputGroup } from "bootstrap-vue";
+import { BButton, BFormInput } from "bootstrap-vue";
 import { computed, nextTick, type PropType, reactive, ref, type UnwrapRef } from "vue";
 
 import { useUid } from "@/composables/utils/uid";
@@ -12,7 +12,7 @@ import { useHighlight } from "./useHighlight";
 import { filterOptions } from "./worker/filterOptions";
 import { useSelectMany } from "./worker/selectMany";
 
-library.add(faLongArrowAltLeft, faLongArrowAltRight);
+library.add(faLongArrowAltLeft, faLongArrowAltRight, faTimes);
 
 type SelectValue = Record<string, unknown> | string | number | null;
 
@@ -264,36 +264,43 @@ const selectedCount = computed(() => {
 </script>
 
 <template>
-    <section :id="props.id" class="form-select-many">
-        <BInputGroup>
-            <BFormInput
-                v-model="searchValue"
-                class="select-many-search"
-                :state="regexInvalid ? false : undefined"
-                :debounce="300"
-                :placeholder="props.placeholder"></BFormInput>
-
-            <template v-slot:append>
-                <BButton
-                    class="toggle-button case-sensitivity"
-                    :variant="caseSensitive ? 'primary' : 'outline-primary'"
-                    role="switch"
-                    :aria-checked="`${caseSensitive}`"
-                    title="case sensitive"
-                    @click="caseSensitive = !caseSensitive">
-                    Aa
-                </BButton>
-                <BButton
-                    class="toggle-button use-regex"
-                    :variant="useRegex ? 'primary' : 'outline-primary'"
-                    role="switch"
-                    :aria-checked="`${useRegex}`"
-                    title="use regex"
-                    @click="useRegex = !useRegex">
-                    .*
-                </BButton>
-            </template>
-        </BInputGroup>
+    <div :id="props.id" class="form-select-many">
+        <fieldset class="search-bar">
+            <fieldset class="search-input">
+                <BFormInput
+                    v-model="searchValue"
+                    type="search"
+                    :state="regexInvalid ? false : undefined"
+                    :debounce="300"
+                    :placeholder="props.placeholder" />
+                <button
+                    class="inline-icon-button"
+                    :class="{ hidden: searchValue === '' }"
+                    title="Clear search"
+                    @click="searchValue = ''">
+                    <FontAwesomeIcon icon="fa-times" />
+                </button>
+            </fieldset>
+
+            <BButton
+                class="toggle-button case-sensitivity"
+                :variant="caseSensitive ? 'primary' : 'outline-primary'"
+                role="switch"
+                :aria-checked="`${caseSensitive}`"
+                title="case sensitive"
+                @click="caseSensitive = !caseSensitive">
+                Aa
+            </BButton>
+            <BButton
+                class="toggle-button use-regex"
+                :variant="useRegex ? 'primary' : 'outline-primary'"
+                role="switch"
+                :aria-checked="`${useRegex}`"
+                title="use regex"
+                @click="useRegex = !useRegex">
+                .*
+            </BButton>
+        </fieldset>
 
         <div class="options-box border rounded mt-2">
             <div class="selection-heading border-right px-2">
@@ -365,17 +372,55 @@ const selectedCount = computed(() => {
             <span> Shift to highlight range. Ctrl to highlight multiple </span>
             <span v-if="workerRunning" class="working-indicator"> Processing... </span>
         </div>
-    </section>
+    </div>
 </template>
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
 .form-select-many {
+    .search-bar {
+        display: grid;
+        grid-template-columns: 1fr 2.25rem 2.25rem;
+
+        > *:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+
+        > *:last-child {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        .search-input {
+            position: relative;
+
+            input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            button {
+                position: absolute;
+                right: 4px;
+                top: 4px;
+                height: calc(100% - 8px);
+                width: 26px;
+
+                &.hidden:not(:focus) {
+                    color: transparent;
+
+                    &:hover {
+                        color: $white;
+                    }
+                }
+            }
+        }
+    }
+
     .toggle-button {
         padding-left: 0;
         padding-right: 0;
-        width: 2rem;
     }
 }
 

From 1ef360c435d7620ea0dbb2d000bca2c455a5aee0 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:51:55 +0100
Subject: [PATCH 37/37] decrease toggle button width

---
 .../components/Form/Elements/FormSelectMany/FormSelectMany.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 887bde0ae6f7..5491a4742b85 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -381,7 +381,7 @@ const selectedCount = computed(() => {
 .form-select-many {
     .search-bar {
         display: grid;
-        grid-template-columns: 1fr 2.25rem 2.25rem;
+        grid-template-columns: 1fr 2.125rem 2.125rem;
 
         > *:not(:first-child):not(:last-child) {
             border-radius: 0;