From 820823b5c34f7c49fbdab7d516a4794a26a732e7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 23 Oct 2022 15:27:29 +0200
Subject: [PATCH] fix(task): focusing on assignee search field when activating
 it

---
 .../tasks/partials/editAssignees.vue          | 53 ++++++++-----------
 1 file changed, 21 insertions(+), 32 deletions(-)

diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 78a1a3577..d3c1e9c8b 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -1,30 +1,25 @@
 <template>
-	<div
-		tabindex="-1"
-		@focus="focus"
+	<Multiselect
+		:loading="listUserService.loading"
+		:placeholder="$t('task.assignee.placeholder')"
+		:multiple="true"
+		@search="findUser"
+		:search-results="foundUsers"
+		@select="addAssignee"
+		label="name"
+		:select-placeholder="$t('task.assignee.selectPlaceholder')"
+		v-model="assignees"
+		ref="userSearchInputRef"
 	>
-		<Multiselect
-			:loading="listUserService.loading"
-			:placeholder="$t('task.assignee.placeholder')"
-			:multiple="true"
-			@search="findUser"
-			:search-results="foundUsers"
-			@select="addAssignee"
-			label="name"
-			:select-placeholder="$t('task.assignee.selectPlaceholder')"
-			v-model="assignees"
-			ref="multiselect"
-		>
-			<template #tag="{item: user}">
-				<span class="assignee">
-					<user :avatar-size="32" :show-username="false" :user="user"/>
-					<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
-						<icon icon="times"/>
-					</BaseButton>
-				</span>
-			</template>
-		</Multiselect>
-	</div>
+		<template #tag="{item: user}">
+			<span class="assignee">
+				<user :avatar-size="32" :show-username="false" :user="user"/>
+				<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
+					<icon icon="times"/>
+				</BaseButton>
+			</span>
+		</template>
+	</Multiselect>
 </template>
 
 <script setup lang="ts">
@@ -41,7 +36,7 @@ import {success} from '@/message'
 import {useTaskStore} from '@/stores/tasks'
 
 import type {IUser} from '@/modelTypes/IUser'
-import { getDisplayName } from '@/models/user'
+import {getDisplayName} from '@/models/user'
 
 const props = defineProps({
 	taskId: {
@@ -130,12 +125,6 @@ async function findUser(query: string) {
 function clearAllFoundUsers() {
 	foundUsers.value = []
 }
-
-const multiselect = ref()
-
-function focus() {
-	multiselect.value.focus()
-}
 </script>
 
 <style lang="scss" scoped>