From 3a4d174d4f410be5101d8a9c032c9c8307521412 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Thu, 26 Oct 2023 16:09:45 +0200
Subject: [PATCH] fix(LeftSidebar): disable the blur event of the search box
 when clicking on a conversation.

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue    |  4 ++++
 .../LeftSidebar/SearchBox/SearchBox.vue       | 23 +++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1fce07c4212..77676a906cb 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -28,6 +28,7 @@
 				<SearchBox ref="searchBox"
 					:value.sync="searchText"
 					:is-focused.sync="isFocused"
+					:list="container"
 					@input="debounceFetchSearchResults"
 					@abort-search="abortSearch" />
 			</div>
@@ -312,6 +313,7 @@ export default {
 	setup() {
 		const leftSidebar = ref(null)
 		const searchBox = ref(null)
+		const container = ref(null)
 
 		const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item')
 
@@ -320,6 +322,7 @@ export default {
 			resetNavigation,
 			leftSidebar,
 			searchBox,
+			container,
 		}
 	},
 
@@ -791,6 +794,7 @@ export default {
 				}
 			}
 			if (to.name === 'conversation') {
+				this.abortSearch()
 				this.$store.dispatch('joinConversation', { token: to.params.token })
 				this.scrollToConversation(to.params.token)
 			}
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index a97341421ec..4ffe470fa4d 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -67,6 +67,13 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		/**
+		 * Conversations list reference for handling click trigger
+		 */
+		 list: {
+			type: HTMLElement,
+			default: null,
+		},
 	},
 
 	expose: ['focus'],
@@ -136,16 +143,22 @@ 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
+			if (this.list?.contains(event.relatedTarget)) {
+				return
+			}
+			 // Blur in other cases
+			this.$emit('blur', event)
+			if (this.value === '') {
+				this.$emit('update:is-focused', false)
 			}
 		},