From 02ab944020f955290c600e21b2c85bbdc8af8732 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 12 Sep 2024 13:38:49 +0200
Subject: [PATCH] fix(labels): remove input interactivity when label edit is
 disabled

(cherry picked from commit bdccd633fe7a3418aaedc5d6ea9df57a0c51b62e)
---
 frontend/src/components/input/Multiselect.vue | 24 ++++++++++++++++---
 .../components/tasks/partials/EditLabels.vue  |  2 ++
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 8aec33957..c4f8ef2cb 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -2,8 +2,9 @@
 	<div
 		ref="multiselectRoot"
 		class="multiselect"
-		:class="{'has-search-results': searchResultsVisible}"
+		:class="{'has-search-results': searchResultsVisible, 'is-disabled': disabled}"
 		tabindex="-1"
+		:aria-disabled="disabled"
 		@focus="focus"
 	>
 		<div
@@ -12,7 +13,7 @@
 		>
 			<div
 				class="input-wrapper input"
-				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable}"
+				:class="{'has-multiple': hasMultiple, 'has-removal-button': removalAvailable && !disabled}"
 			>
 				<slot
 					v-if="Array.isArray(internalValue)"
@@ -31,6 +32,7 @@
 							>
 								{{ label !== '' ? item[label] : item }}
 								<BaseButton
+									v-if="!disabled"
 									class="delete is-small"
 									@click="() => remove(item)"
 								/>
@@ -40,6 +42,7 @@
 				</slot>
 				
 				<input
+					v-if="!disabled"
 					:id="id"
 					ref="searchInput"
 					v-model="query"
@@ -55,7 +58,7 @@
 					@focus="handleFocus"
 				>
 				<BaseButton 
-					v-if="removalAvailable"
+					v-if="removalAvailable && !disabled"
 					class="removal-button"
 					@click="resetSelectedValue"
 				>
@@ -164,6 +167,8 @@ const props = withDefaults(defineProps<{
 	closeAfterSelect?: boolean
 	/** If false, the search input will get the autocomplete="off" attributes attached to it. */
 	autocompleteEnabled?: boolean
+	/** If true, disables the multiselect input */
+	disabled?: boolean
 }>(), {
 	modelValue: null,
 	loading: false,
@@ -179,6 +184,7 @@ const props = withDefaults(defineProps<{
 	searchDelay: 200,
 	closeAfterSelect: true,
 	autocompleteEnabled: true,
+	disabled: false,
 })
 
 const emit = defineEmits<{
@@ -448,6 +454,18 @@ function focus() {
 	.control.is-loading::after {
 		top: .75rem;
 	}
+
+	&.is-disabled {
+		.input-wrapper, .input, & {
+			cursor: default !important;
+
+			&:focus-within,&:focus-visible, &:hover, &:focus {
+				border-color: transparent !important;
+				background: transparent !important;
+				box-shadow: none;
+			}
+		}
+	}
 }
 
 .input-wrapper {
diff --git a/frontend/src/components/tasks/partials/EditLabels.vue b/frontend/src/components/tasks/partials/EditLabels.vue
index 9cdd093a3..606131d6e 100644
--- a/frontend/src/components/tasks/partials/EditLabels.vue
+++ b/frontend/src/components/tasks/partials/EditLabels.vue
@@ -10,6 +10,7 @@
 		:create-placeholder="$t('task.label.createPlaceholder')"
 		:search-delay="10"
 		:close-after-select="false"
+		:disabled="disabled"
 		@search="findLabel"
 		@select="addLabel"
 		@create="createAndAddLabel"
@@ -21,6 +22,7 @@
 			>
 				<span>{{ label.title }}</span>
 				<BaseButton
+					v-if="!disabled"
 					v-cy="'taskDetail.removeLabel'"
 					class="delete is-small"
 					@click="removeLabel(label)"