Focus task detail elements when they show up

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>

src/components/tasks/partials/editAssignees.vue

@@ -1,25 +1,31 @@
 <template>
-	<multiselect
+	<div
-		:loading="listUserService.loading"
+		tabindex="-1"
-		placeholder="Type to assign a user..."
+		@focus="focus"
-		:disabled="disabled"
-		:multiple="true"
-		@search="findUser"
-		:search-results="foundUsers"
-		@select="addAssignee"
-		label="username"
-		select-placeholder="Assign this user"
-		v-model="assignees"
 	>
-		<template v-slot:tag="props">
+		<multiselect
-			<span class="assignee">
+			:loading="listUserService.loading"
-				<user :avatar-size="32" :show-username="false" :user="props.item"/>
+			placeholder="Type to assign a user..."
-				<a @click="removeAssignee(props.item)" class="remove-assignee" v-if="!disabled">
+			:disabled="disabled"
-					<icon icon="times"/>
+			:multiple="true"
-				</a>
+			@search="findUser"
-			</span>
+			:search-results="foundUsers"
-		</template>
+			@select="addAssignee"
-	</multiselect>
+			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>

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()
 			}