[main] Fix: Adding new tag creates a 'ghost' tag

src/components/card/CardSidebarTabDetails.vue

@@ -152,17 +152,23 @@ export default {
 		}, 500),
 
 		addLabelToCard(newLabel) {
-			this.copiedCard.labels.push(newLabel)
-			const data = {
-				card: this.copiedCard,
-				labelId: newLabel.id,
+			if (!newLabel?.id || !this.card?.id) {
+				return
 			}
-			this.$store.dispatch('addLabel', data)
+
+			this.$store.dispatch('addLabel', {
+				card: { id: this.card.id },
+				labelId: newLabel.id,
+			})
 		},
 
 		async addLabelToBoardAndCard(name) {
+			if (!name || !this.card?.id) {
+				return
+			}
+
 			await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
-				card: this.copiedCard,
+				card: { id: this.card.id },
 				newLabel: {
 					title: name,
 					color: this.randomColor(),
@@ -171,18 +177,14 @@ export default {
 		},
 
 		removeLabelFromCard(removedLabel) {
-			const removeIndex = this.copiedCard.labels.findIndex((label) => {
-				return label.id === removedLabel.id
-			})
-			if (removeIndex !== -1) {
-				this.copiedCard.labels.splice(removeIndex, 1)
+			if (!removedLabel?.id || !this.card?.id) {
+				return
 			}
 
-			const data = {
-				card: this.copiedCard,
+			this.$store.dispatch('removeLabel', {
+				card: { id: this.card.id },
 				labelId: removedLabel.id,
-			}
-			this.$store.dispatch('removeLabel', data)
+			})
 		},
 		stringify(date) {
 			return moment(date).locale(this.locale).format('LLL')

src/components/card/TagSelector.vue

@@ -74,15 +74,31 @@ export default {
 		},
 	},
 	methods: {
-		onSelect(options) {
-			const addedLabel = options.filter(option => !this.card.labels.includes(option))
-			this.$emit('select', addedLabel[0])
+		onSelect(optionOrOptions) {
+			const option = Array.isArray(optionOrOptions)
+				? optionOrOptions[optionOrOptions.length - 1]
+				: optionOrOptions
+
+			if (!option || !option.id) {
+				return
+			}
+
+			this.$emit('select', option)
 		},
 		onRemove(removedLabel) {
+			if (!removedLabel || !removedLabel.id) {
+				return
+			}
+
 			this.$emit('remove', removedLabel)
 		},
 		async onNewTag(option) {
-			this.$emit('newtag', option.title)
+			const labelText = option?.title || option?.label
+			if (!labelText) {
+				return
+			}
+
+			this.$emit('newtag', labelText)
 		},
 	},
 }

src/store/card.js

@@ -9,7 +9,7 @@
 
 const apiClient = new CardApi()
 
 export default function cardModuleFactory() {
 	return {
 		state: {
 			cards: [],
@@ -243,6 +243,32 @@
 					Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
 				}
 			},
+			addLabelToCard(state, { cardId, label }) {
+				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
+				if (existingIndex === -1 || !label?.id) {
+					return
+				}
+
+				const labels = state.cards[existingIndex].labels || []
+				if (labels.find((_label) => _label.id === label.id)) {
+					return
+				}
+
+				const updatedLabels = [...labels, label]
+				Vue.set(state.cards[existingIndex], 'labels', updatedLabels)
+				Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
+			},
+			removeLabelFromCard(state, { cardId, labelId }) {
+				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
+				if (existingIndex === -1) {
+					return
+				}
+
+				const labels = state.cards[existingIndex].labels || []
+				const updatedLabels = labels.filter((_label) => _label.id !== labelId)
+				Vue.set(state.cards[existingIndex], 'labels', updatedLabels)
+				Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
+			},
 			cardSetAttachmentCount(state, { cardId, count }) {
 				const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 				if (existingIndex !== -1) {
@@ -348,13 +374,22 @@
 				const user = await apiClient.removeUser(card.id, assignee.userId, assignee.type)
 				commit('removeUserFromCard', user)
 			},
-			async addLabel({ commit }, data) {
+			async addLabel({ commit, rootState }, data) {
+				if (!data?.card?.id || !data?.labelId) {
+					return
+				}
+
 				await apiClient.assignLabelToCard(data)
-				commit('updateCardProperty', { property: 'labels', card: data.card })
+				const label = rootState.currentBoard?.labels?.find((l) => l.id === data.labelId) || { id: data.labelId }
+				commit('addLabelToCard', { cardId: data.card.id, label })
 			},
 			async removeLabel({ commit }, data) {
+				if (!data?.card?.id || !data?.labelId) {
+					return
+				}
+
 				await apiClient.removeLabelFromCard(data)
-				commit('updateCardProperty', { property: 'labels', card: data.card })
+				commit('removeLabelFromCard', { cardId: data.card.id, labelId: data.labelId })
 			},
 			async updateCardDesc({ commit }, card) {
 				const updatedCard = await apiClient.updateCard(card)