diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue index be8c2c026ee0..275d61a7c694 100644 --- a/client/src/components/Form/Elements/FormSelect.vue +++ b/client/src/components/Form/Elements/FormSelect.vue @@ -46,6 +46,30 @@ const emit = defineEmits<{ (e: "input", value: SelectValue | Array<SelectValue>): void; }>(); +/** + * When there are more options than this, push selected options to the end + */ +const optionReorderThreshold = 8; + +const reorderedOptions = computed(() => { + if (props.options.length <= optionReorderThreshold) { + return props.options; + } else { + const selectedOptions: SelectOption[] = []; + const unselectedOptions: SelectOption[] = []; + + props.options.forEach((option) => { + if (selectedValues.value.includes(option.value)) { + selectedOptions.push(option); + } else { + unselectedOptions.push(option); + } + }); + + return [...unselectedOptions, ...selectedOptions]; + } +}); + /** * Configure deselect label */ @@ -141,7 +165,7 @@ onMounted(() => { :deselect-label="deselectLabel" label="label" :multiple="multiple" - :options="props.options" + :options="reorderedOptions" :placeholder="placeholder" :selected-label="selectedLabel" select-label="Click to select"