Move creation of new items to the bottom of the multiselect list
continuous-integration/drone/push Build is passing Details

This commit is contained in:
kolaente 2021-06-03 22:58:47 +02:00
parent a9d3446ce3
commit 3dbd36eef7
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 29 additions and 33 deletions

View File

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

View File

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