fix(LeftSidebar): disable the blur event of the search box when click…

…ing on a conversation.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/LeftSidebar/ConversationsListVirtual.vue

@@ -26,7 +26,7 @@
 		:item-size="CONVERSATION_ITEM_SIZE"
 		key-field="token">
 		<template #default="{ item }">
-			<Conversation :item="item" />
+			<Conversation :item="item" @click="click" />
 		</template>
 		<template #after>
 			<LoadingPlaceholder v-if="loading" type="conversations" />
@@ -65,6 +65,8 @@ export default {
 		},
 	},
 
+	emits: ['item-clicked'],
+
 	setup() {
 		return {
 			CONVERSATION_ITEM_SIZE,
@@ -151,6 +153,10 @@ export default {
 				this.scrollToItem(index)
 			}
 		},
+
+		click() {
+			this.$emit('item-clicked')
+		},
 	},
 }
 </script>

src/components/LeftSidebar/LeftSidebar.vue

@@ -142,7 +142,8 @@
 								:conversations="filteredConversationsList"
 								:loading="!initialisedConversations"
 								class="scroller h-100"
-								@scroll.native="debounceHandleScroll" />
+								@scroll.native="debounceHandleScroll"
+								@item-clicked="abortSearch" />
 						</li>
 						<NcButton v-if="!preventFindingUnread && lastUnreadMentionBelowViewportIndex !== null"
 							class="unread-mention-button"

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -136,16 +136,23 @@ export default {
 		},
 
 		handleBlur(event) {
+			// Blur triggered by clicking on the trailing button
 			if (event.relatedTarget?.classList.contains('input-field__clear-button')) {
 				event.preventDefault()
 				this.getTrailingButton()?.addEventListener('blur', (trailingEvent) => {
 					this.handleBlur(trailingEvent)
 				})
-			} else {
-				this.$emit('blur', event)
-				if (this.value === '') {
-					this.$emit('update:is-focused', false)
-				}
+				return
+			}
+			// Blur triggered by clicking on a conversation item
+			const list = document.querySelector('.left-sidebar__list')
+			if (list && list.contains(event.relatedTarget)) {
+				return
+			}
+			 // Blur in other cases
+			this.$emit('blur', event)
+			if (this.value === '') {
+				this.$emit('update:is-focused', false)
 			}
 		},