diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 50b3d57b9..b61e898ae 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -9,9 +9,9 @@
@@ -159,7 +166,7 @@ const props = defineProps({
createPlaceholder: {
type: String,
default() {
- const {t} = useI18n({useScope: 'global'})
+ const {t} = useI18n({useScope: 'global'})
return t('input.multiselect.createPlaceholder')
},
},
@@ -169,7 +176,7 @@ const props = defineProps({
selectPlaceholder: {
type: String,
default() {
- const {t} = useI18n({useScope: 'global'})
+ const {t} = useI18n({useScope: 'global'})
return t('input.multiselect.selectPlaceholder')
},
},
@@ -215,23 +222,23 @@ const props = defineProps({
})
const emit = defineEmits<{
- (e: 'update:modelValue', value: null): void
+ (e: 'update:modelValue', value: null): void
/**
* Triggered every time the search query input changes
*/
- (e: 'search', query: string): void
+ (e: 'search', query: string): void
/**
* Triggered every time an option from the search results is selected. Also triggers a change in v-model.
*/
- (e: 'select', value: {[key: string]: any}): void
+ (e: 'select', value: {[key: string]: any}): void
/**
* If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
*/
- (e: 'create', query: string): void
+ (e: 'create', query: string): void
/**
* If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
*/
- (e: 'remove', value: null): void
+ (e: 'remove', value: null): void
}>()
const query = ref('')
@@ -269,8 +276,8 @@ const creatableAvailable = computed(() => {
const hasResult = filteredSearchResults.value.some((elem: any) => elementInResults(elem, props.label, query.value))
const hasQueryAlreadyAdded = Array.isArray(internalValue.value) && internalValue.value.some(elem => elementInResults(elem, props.label, query.value))
- return props.creatable
- && query.value !== ''
+ return props.creatable
+ && query.value !== ''
&& !(hasResult || hasQueryAlreadyAdded)
})
@@ -287,7 +294,13 @@ const hasMultiple = computed(() => {
return props.multiple && Array.isArray(internalValue.value) && internalValue.value.length > 0
})
+const removalAvailable = computed(() => !props.multiple && internalValue.value !== null && query.value !== '')
+function resetSelectedValue() {
+ select(null)
+}
+
const searchInput = ref(null)
+
// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
function search() {
@@ -312,6 +325,7 @@ function search() {
}
const multiselectRoot = ref(null)
+
function hideSearchResultsHandler(e: MouseEvent) {
closeWhenClickedOutside(e, multiselectRoot.value, closeSearchResults)
}
@@ -328,7 +342,7 @@ function handleFocus() {
}, 10)
}
-function select(object: {[key: string]: any}) {
+function select(object: {[key: string]: any} | null) {
if (props.multiple) {
if (internalValue.value === null) {
internalValue.value = []
@@ -370,6 +384,7 @@ function setSelectedObject(object: string | {[id: string]: any} | null, resetOnl
}
const results = ref<(Element | ComponentPublicInstance)[]>([])
+
function setResult(el: Element | ComponentPublicInstance | null, index: number) {
if (el === null) {
delete results.value[index]
@@ -416,7 +431,7 @@ function createOrSelectOnEnter() {
if (!creatableAvailable.value) {
// Check if there's an exact match for our search term
const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
- if(exactMatch) {
+ if (exactMatch) {
select(exactMatch)
}
@@ -572,4 +587,14 @@ function focus() {
transition: color $transition;
padding-left: .5rem;
}
+
+.has-removal-button {
+ position: relative;
+}
+
+.removal-button {
+ position: absolute;
+ right: .5rem;
+ color: var(--danger);
+}
\ No newline at end of file
diff --git a/src/components/tasks/partials/projectSearch.vue b/src/components/tasks/partials/projectSearch.vue
index 07548c8f1..d2466cafc 100644
--- a/src/components/tasks/partials/projectSearch.vue
+++ b/src/components/tasks/partials/projectSearch.vue
@@ -70,11 +70,11 @@ function findProjects(query: string) {
foundProjects.value = projectStore.searchProject(query)
}
-function select(l: IProject | null) {
- if (l === null) {
- return
+function select(p: IProject | null) {
+ if (p === null) {
+ Object.assign(project, {id: 0})
}
- Object.assign(project, l)
+ Object.assign(project, p)
emit('update:modelValue', project)
}