Merge pull request #1962 from rehanrehman389/multiselect

fix: show options on focus and filter selected values

frontend/src/components/Controls/MultiSelect.vue

@@ -19,6 +19,14 @@
 									showOptions = true
 								}
 							"
+							@focus="
+								() => {
+									showOptions = true
+									if (!filterOptions.data || filterOptions.data.length === 0) {
+										reload('')
+									}
+								}
+							"
 							autocomplete="off"
 						/>
 					</template>
@@ -152,9 +160,6 @@ const selectedValue = computed({
 	get: () => query.value || '',
 	set: (val) => {
 		query.value = ''
-		if (val) {
-			showOptions.value = false
-		}
 		val?.value && addValue(val.value)
 	},
 })
@@ -183,7 +188,8 @@ const filterOptions = createResource({
 
 const options = computed(() => {
 	setFocus()
-	return filterOptions.data || []
+	const allOptions = filterOptions.data || []
+	return allOptions.filter((option) => !values.value?.includes(option.value))
 })
 
 function reload(val) {

frontend/src/pages/Quizzes.vue

@@ -112,7 +112,12 @@
 		}"
 	>
 		<template #body-content>
-			<FormControl v-model="title" :label="__('Title')" type="text" @keydown.enter="insertQuiz(() => showForm = false)" />
+			<FormControl
+				v-model="title"
+				:label="__('Title')"
+				type="text"
+				@keydown.enter="insertQuiz(() => (showForm = false))"
+			/>
 		</template>
 	</Dialog>
 </template>