fix(settings): allow removing the default project via settings

src/components/input/multiselect.vue

@@ -9,7 +9,7 @@
 		<div class="control" :class="{'is-loading': loading || localLoading}">
 			<div
 				class="input-wrapper input"
-				:class="{'has-multiple': hasMultiple}"
+				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable}"
 			>
 				<slot
 					v-if="Array.isArray(internalValue)"
@@ -40,6 +40,13 @@
 					:autocomplete="autocompleteEnabled ? undefined : 'off'"
 					:spellcheck="autocompleteEnabled ? undefined : 'false'"
 				/>
+				<BaseButton 
+					v-if="removalAvailable"
+					class="removal-button"
+					@click="resetSelectedValue"
+				>
+					<icon icon="times"/>
+				</BaseButton>
 			</div>
 		</div>
 
@@ -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<HTMLInputElement | null>(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<HTMLElement | null>(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);
+}
 </style>

src/components/tasks/partials/projectSearch.vue

@@ -70,11 +70,11 @@ function findProjects(query: string) {
 	foundProjects.value = projectStore.searchProject(query)
 }
 
-function select(l: IProject | null) {
+function select(p: IProject | null) {
-	if (l === null) {
+	if (p === null) {
-		return
+		Object.assign(project, {id: 0})
 	}
-	Object.assign(project, l)
+	Object.assign(project, p)
 	emit('update:modelValue', project)
 }
 </script>