From 747a9fe505fd10c29f7a89d64bc1bb1d95db75d8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 18 Apr 2021 16:50:12 +0200
Subject: [PATCH] Focus task detail elements when they show up

---
 src/components/input/multiselect.vue          |  5 ++
 .../tasks/partials/editAssignees.vue          | 49 +++++++++++--------
 src/views/tasks/TaskDetailView.vue            |  2 +-
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 7498b9b04..38ce865ba 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -3,6 +3,8 @@
 		class="multiselect"
 		:class="{'has-search-results': searchResultsVisible}"
 		ref="multiselectRoot"
+		tabindex="-1"
+		@focus="focus"
 	>
 		<div class="control" :class="{'is-loading': loading || localLoading}">
 			<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
@@ -324,6 +326,9 @@ export default {
 			this.$emit('input', this.internalValue)
 			this.$emit('remove', item)
 		},
+		focus() {
+			this.$refs.searchInput.focus()
+		},
 	},
 }
 </script>
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 3d05df22b..bb3f04cd8 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -1,25 +1,31 @@
 <template>
-	<multiselect
-		:loading="listUserService.loading"
-		placeholder="Type to assign a user..."
-		:disabled="disabled"
-		:multiple="true"
-		@search="findUser"
-		:search-results="foundUsers"
-		@select="addAssignee"
-		label="username"
-		select-placeholder="Assign this user"
-		v-model="assignees"
+	<div
+		tabindex="-1"
+		@focus="focus"
 	>
-		<template v-slot:tag="props">
-			<span class="assignee">
-				<user :avatar-size="32" :show-username="false" :user="props.item"/>
-				<a @click="removeAssignee(props.item)" class="remove-assignee" v-if="!disabled">
-					<icon icon="times"/>
-				</a>
-			</span>
-		</template>
-	</multiselect>
+		<multiselect
+			:loading="listUserService.loading"
+			placeholder="Type to assign a user..."
+			:disabled="disabled"
+			:multiple="true"
+			@search="findUser"
+			:search-results="foundUsers"
+			@select="addAssignee"
+			label="username"
+			select-placeholder="Assign this user"
+			v-model="assignees"
+			ref="multiselect"
+		>
+			<template v-slot:tag="props">
+				<span class="assignee">
+					<user :avatar-size="32" :show-username="false" :user="props.item"/>
+					<a @click="removeAssignee(props.item)" class="remove-assignee" v-if="!disabled">
+						<icon icon="times"/>
+					</a>
+				</span>
+			</template>
+		</multiselect>
+	</div>
 </template>
 
 <script>
@@ -119,6 +125,9 @@ export default {
 		clearAllFoundUsers() {
 			this.$set(this, 'foundUsers', [])
 		},
+		focus() {
+			this.$refs.multiselect.focus()
+		},
 	},
 }
 </script>
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 7943a6fb0..dce929f18 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -654,7 +654,7 @@ export default {
 		toggleTaskDone() {
 			this.task.done = !this.task.done
 
-			if(this.task.done) {
+			if (this.task.done) {
 				playPop()
 			}