From 9d7b3f266a16fd93af28c6b2bc956dedd2690971 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 26 Jan 2022 20:55:17 +0800
Subject: [PATCH] fix sorting of select-multiple-dropdown values (#11289)

---
 .../select-multiple-dropdown.vue                | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/src/interfaces/select-multiple-dropdown/select-multiple-dropdown.vue b/app/src/interfaces/select-multiple-dropdown/select-multiple-dropdown.vue
index 04ebf1bf6f..4b47561adc 100644
--- a/app/src/interfaces/select-multiple-dropdown/select-multiple-dropdown.vue
+++ b/app/src/interfaces/select-multiple-dropdown/select-multiple-dropdown.vue
@@ -12,7 +12,7 @@
 		:placeholder="placeholder"
 		:allow-other="allowOther"
 		:close-on-content-click="false"
-		@update:model-value="$emit('input', $event)"
+		@update:model-value="updateValue($event)"
 	>
 		<template v-if="icon" #prepend>
 			<v-icon :name="icon" />
@@ -23,6 +23,7 @@
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
 import { defineComponent, PropType } from 'vue';
+import { sortBy } from 'lodash';
 
 type Option = {
 	text: string;
@@ -61,9 +62,19 @@ export default defineComponent({
 		},
 	},
 	emits: ['input'],
-	setup() {
+	setup(props, { emit }) {
 		const { t } = useI18n();
-		return { t };
+
+		return { t, updateValue };
+
+		function updateValue(value: PropType<string[]>) {
+			const sortedValue = sortBy(value, (val) => {
+				const sortIndex = props.choices.findIndex((choice) => val === choice.value);
+				return sortIndex !== -1 ? sortIndex : value.length;
+			});
+
+			emit('input', sortedValue);
+		}
 	},
 });
 </script>