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

…ing on a conversation.

Signed-off-by: DorraJaouad <[email protected]>

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)
 			}

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)
 			}
 		},