improve search box focus process

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

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'

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,