From 10c8891e1fead6f0b5d2854e7891162edcda0443 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <6173598+dpschen@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:49:24 +0200
Subject: [PATCH] feat(frontend): improve generics in multiselect dropdown
 (#920)

---
 .../components/input/AutocompleteDropdown.vue |  7 +++----
 frontend/src/components/input/Multiselect.vue | 19 +++++++------------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/input/AutocompleteDropdown.vue b/frontend/src/components/input/AutocompleteDropdown.vue
index e5f354a0e..1b0e2b704 100644
--- a/frontend/src/components/input/AutocompleteDropdown.vue
+++ b/frontend/src/components/input/AutocompleteDropdown.vue
@@ -1,9 +1,8 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T">
 import {type ComponentPublicInstance, nextTick, ref, watch} from 'vue'
 
 const props = withDefaults(defineProps<{
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	options: any[],
+	options: T[],
 	suggestion?: string,
 	maxHeight?: number,
 }>(), {
@@ -111,7 +110,7 @@ function select(offset: number) {
 	elems?.focus()
 }
 
-function onSelectValue(value) {
+function onSelectValue(value: T) {
 	model.value = value
 	selectedIndex.value = 0
 	setState('unfocused')
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 8a4cbe6cd..f58a970bb 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -123,7 +123,7 @@
 	</div>
 </template>
 
-<script setup lang="ts" generic="T extends { [id: string]: any }">
+<script setup lang="ts" generic="T extends Record<string, unknown>">
 import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance} from 'vue'
 import {useI18n} from 'vue-i18n'
 
@@ -206,11 +206,10 @@ const emit = defineEmits<{
 	'remove': [value: T],
 }>()
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function elementInResults(elem: string | any, label: string, query: string): boolean {
+function elementInResults(elem: string | T, label: string, query: string): boolean {
 	// Don't make create available if we have an exact match in our search results.
 	if (label !== '') {
-		return elem[label] === query
+		return (elem as Record<string, unknown>)[label] === query
 	}
 
 	return elem === query
@@ -249,8 +248,7 @@ const searchResultsVisible = computed(() => {
 })
 
 const creatableAvailable = computed(() => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const hasResult = filteredSearchResults.value.some((elem: any) => elementInResults(elem, props.label, query.value))
+	const hasResult = filteredSearchResults.value.some((elem) => elementInResults(elem, props.label, query.value as string))
 	const hasQueryAlreadyAdded = Array.isArray(internalValue.value) && internalValue.value.some(elem => elementInResults(elem, props.label, query.value))
 
 	return props.creatable
@@ -261,8 +259,7 @@ const creatableAvailable = computed(() => {
 const filteredSearchResults = computed(() => {
 	const currentInternal = internalValue.value
 	if (props.multiple && currentInternal !== null && Array.isArray(currentInternal)) {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		return searchResults.value.filter((item: any) => !currentInternal.some(e => e === item))
+		return searchResults.value.filter((item) => !currentInternal.some(e => e === item))
 	}
 
 	return searchResults.value
@@ -408,8 +405,7 @@ function createOrSelectOnEnter() {
 
 	if (!creatableAvailable.value) {
 		// Check if there's an exact match for our search term
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
+		const exactMatch = filteredSearchResults.value.find((elem) => elementInResults(elem, props.label, query.value as string))
 		if (exactMatch) {
 			select(exactMatch)
 		}
@@ -420,8 +416,7 @@ function createOrSelectOnEnter() {
 	create()
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function remove(item: any) {
+function remove(item: T) {
 	for (const ind in internalValue.value) {
 		if (internalValue.value[ind] === item) {
 			internalValue.value.splice(ind, 1)