From 669944928a63c10b12ae21771639d5040da1a6a9 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 17 Jul 2023 10:42:16 +0200
Subject: [PATCH] improve search box focus process

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/LeftSidebar/LeftSidebar.vue         | 6 ++++--
 src/components/LeftSidebar/SearchBox/SearchBox.vue | 7 ++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1d1b67a2cac..85ff437e937 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -27,6 +27,7 @@
 				:value.sync="searchText"
 				class="conversations-search"
 				:class="{'conversations-search--expanded': isFocused}"
+				:is-focused="isFocused"
 				:is-searching="isSearching"
 				@focus="setIsFocused"
 				@blur="setIsFocused"
@@ -273,7 +274,7 @@ export default {
 	computed: {
 		conversationsList() {
 			let conversations = this.$store.getters.conversationsList
-			if (this.searchText !== '') {
+			if (this.searchText !== '' || this.isFocused) {
 				const lowerSearchText = this.searchText.toLowerCase()
 				conversations = conversations.filter(conversation =>
 					conversation.displayName.toLowerCase().includes(lowerSearchText)
@@ -384,7 +385,8 @@ export default {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
 		setIsFocused(event) {
-			if (event.relatedTarget?.className.includes('input-field__clear-button') || this.searchText !== '') {
+			if ((event.type === 'click' && event.relatedTarget?.className.includes('input-field__clear-button'))
+			|| this.searchText !== '') {
 				return
 			}
 			this.isFocused = event.type === 'focus'
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 67cbdb72e2c..d4142ec0f5d 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -24,7 +24,7 @@
 		<NcTextField ref="searchConversations"
 			:value="value"
 			:label="placeholderText"
-			:show-trailing-button="isSearching"
+			:show-trailing-button="isFocused"
 			trailing-button-icon="close"
 			v-on="$listeners"
 			@update:value="updateValue"
@@ -66,6 +66,11 @@ export default {
 		/**
 		 * If true, this component displays an 'x' button to abort the search
 		 */
+		isFocused: {
+			type: Boolean,
+			default: false,
+		},
+
 		isSearching: {
 			type: Boolean,
 			default: false,