Move creation of new items to the bottom of the multiselect list

src/components/input/multiselect.vue

@@ -26,7 +26,7 @@
 					@keyup="search"
 					@keyup.enter.exact.prevent="() => createOrSelectOnEnter()"
 					:placeholder="placeholder"
-					@keydown.down.exact.prevent="() => preSelect(0, true)"
+					@keydown.down.exact.prevent="() => preSelect(0)"
 					ref="searchInput"
 					@focus="() => showSearchResults = true"
 				/>
@@ -35,27 +35,6 @@
 
 		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
-				<button
-					v-if="creatableAvailable"
-					class="is-fullwidth"
-					ref="result--1"
-					@keydown.up.prevent="() => preSelect(-2)"
-					@keydown.down.prevent="() => preSelect(0)"
-					@keyup.enter.prevent="create"
-					@click.prevent.stop="create"
-				>
-					<span>
-						<slot name="searchResult" :option="query">
-							<span class="search-result">
-								{{ query }}
-							</span>
-						</slot>
-					</span>
-					<span class="hint-text">
-						{{ createPlaceholder }}
-					</span>
-				</button>
-
 				<button
 					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
@@ -74,6 +53,27 @@
 						{{ selectPlaceholder }}
 					</span>
 				</button>
+
+				<button
+					v-if="creatableAvailable"
+					class="is-fullwidth"
+					:ref="`result-${filteredSearchResults.length}`"
+					@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
+					@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
+					@keyup.enter.prevent="create"
+					@click.prevent.stop="create"
+				>
+					<span>
+						<slot name="searchResult" :option="query">
+							<span class="search-result">
+								{{ query }}
+							</span>
+						</slot>
+					</span>
+					<span class="hint-text">
+						{{ createPlaceholder }}
+					</span>
+				</button>
 			</div>
 		</transition>
 
@@ -202,14 +202,14 @@ export default {
 	},
 	computed: {
 		searchResultsVisible() {
-			if(this.query === '' && !this.showEmpty) {
+			if (this.query === '' && !this.showEmpty) {
 				return false
 			}
 
 			return this.showSearchResults && (
-					(this.filteredSearchResults.length > 0) ||
+				(this.filteredSearchResults.length > 0) ||
-					(this.creatable && this.query !== '')
+				(this.creatable && this.query !== '')
-				)
+			)
 		},
 		creatableAvailable() {
 			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
@@ -295,13 +295,8 @@ export default {
 
 			this.query = this.label !== '' ? object[this.label] : object
 		},
-		preSelect(index, lookForCreatable = false) {
+		preSelect(index) {
-
+			if (index < 0) {
-			if (index === 0 && this.creatable && lookForCreatable) {
-				index = -1
-			}
-
-			if (index < -1) {
 				this.$refs.searchInput.focus()
 				return
 			}

src/components/tasks/partials/editLabels.vue

@@ -11,6 +11,7 @@
 		@create="createAndAddLabel"
 		create-placeholder="Add this as new label"
 		v-model="labels"
+		:search-delay="10"
 	>
 		<template v-slot:tag="props">
 			<span