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,4 +1,8 @@
 <template>
+	<div
+		tabindex="-1"
+		@focus="focus"
+	>
 		<multiselect
 			:loading="listUserService.loading"
 			placeholder="Type to assign a user..."
@@ -10,6 +14,7 @@
 			label="username"
 			select-placeholder="Assign this user"
 			v-model="assignees"
+			ref="multiselect"
 		>
 			<template v-slot:tag="props">
 				<span class="assignee">
@@ -20,6 +25,7 @@
 				</span>
 			</template>
 		</multiselect>
+	</div>
 </template>
 
 <script>
@@ -119,6 +125,9 @@ export default {
 		clearAllFoundUsers() {
 			this.$set(this, 'foundUsers', [])
 		},
+		focus() {
+			this.$refs.multiselect.focus()
+		},
 	},
 }
 </script>