Search box fixes

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

3 files changed, 25 insertions, 36 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 78ab6b974..1b584739c 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -24,13 +24,13 @@
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
 			<SearchBox ref="searchbox"
-				v-model="searchText"
+				:value.sync="searchText"
 				class="conversations-search"
 				:class="{'conversations-search--expanded': isFocused}"
-				:disabled="isFiltered"
+				:disabled="isFiltered !== null"
 				:is-searching="isSearching"
-				@blur="setIsFocused(false)"
-				@focus="setIsFocused(true)"
+				@focus="setIsFocused"
+				@blur="setIsFocused"
 				@input="debounceFetchSearchResults"
 				@submit="onInputEnter"
 				@keydown.enter.native="handleEnter"
@@ -46,7 +46,7 @@
 					</template>
 					<NcActionButton close-after-click
 						class="filter-actions__button"
-						:primary="isFiltered === 'mentions'"
+						:class="{'filter-actions__button--active': isFiltered === 'mentions'}"
 						@click="handleFilter('mentions')">
 						<template #icon>
 							<AtIcon :size="20" />
@@ -264,7 +264,6 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
-			isNewGroupConversationOpen: false,
 			isFocused: false,
 			isFiltered: null,
 		}
@@ -389,12 +388,18 @@ export default {
 		getFocusableList() {
 			return this.$el.querySelectorAll('li.acli_wrapper .acli')
 		},
-		setIsFocused(value) {
-			this.isFocused = value
+		setIsFocused(event) {
+			if (event.relatedTarget?.className.includes('input-field__clear-button')) {
+				return
+			}
+			this.isFocused = event.type === 'focus'
+
 		},
 
 		handleFilter(filter) {
 			this.isFiltered = filter
+			// Clear the search input once a filter is active
+			this.searchText = ''
 		},
 
 		focusCancel() {
@@ -418,10 +423,6 @@ export default {
 			}
 		}, 250),
 
-		toggleNewGroupConversation(value) {
-			this.isNewGroupConversationOpen = value
-		},
-
 		async fetchPossibleConversations() {
 			this.contactsLoading = true
 
@@ -510,6 +511,7 @@ export default {
 		// Reset the search text, therefore end the search operation.
 		abortSearch() {
 			this.searchText = ''
+			this.isFocused = false
 			if (this.cancelSearchPossibleConversations) {
 				this.cancelSearchPossibleConversations()
 			}
@@ -755,16 +757,16 @@ export default {
 
 }
 
-//FIXME : this should be changed once the disabled style for input is added
+//FIXME : upstream: this should be changed once the disabled style for NcInputField is added
 :deep(.input-field__input[disabled="disabled"]){
 	background-color: var(--color-background-dark);
 }
 
 .options{
 	position: relative;
-	transition: all 0.3s ease; //gets hidden once the search box is expanded
 	left : calc(65% + 4px);
 	display: flex;
+	height: var(--default-clickable-area);
 }
 
 .filter-actions__button--active{
@@ -776,10 +778,6 @@ export default {
 
 }
 
-.hidden-visually{
-	height:100%;
-}
-
 .settings-button {
 	justify-content: flex-start !important;
 }
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index b3fa6e9c1..11fe1a4a0 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -22,12 +22,13 @@
 <template>
 	<form @submit.prevent="handleSubmit">
 		<NcTextField ref="searchConversations"
-			:value.sync="localValue"
+			:value="value"
 			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			:disabled="disabled"
 			trailing-button-icon="close"
 			v-on="$listeners"
+			@update:value="updateValue"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
@@ -57,8 +58,7 @@ export default {
 			default: t('spreed', 'Search …'),
 		},
 		/**
-		 * The value of the input field, when receiving it as a prop the localValue
-		 * is updated.
+		 * The value of the input field.
 		 */
 		value: {
 			type: String,
@@ -79,25 +79,12 @@ export default {
 
 	emits: ['update:value', 'input', 'submit', 'abort-search'],
 
-	data() {
-		return {
-			localValue: '',
-		}
-	},
 	computed: {
 		cancelSearchLabel() {
 			return t('spreed', 'Cancel search')
 		},
 	},
-	watch: {
-		localValue(localValue) {
-			this.$emit('update:value', localValue)
-			this.$emit('input', localValue)
-		},
-		value(value) {
-			this.localValue = value
-		},
-	},
+
 	mounted() {
 		this.focusInputIfRoot()
 		/**
@@ -109,6 +96,10 @@ export default {
 		EventBus.$off('route-change', this.focusInputIfRoot)
 	},
 	methods: {
+		updateValue(value) {
+			this.$emit('update:value', value)
+			this.$emit('input', value)
+		},
 		// Focus the input field of the searchbox component.
 		focusInput() {
 			this.$refs.searchConversations.$el.focus()
diff --git a/src/mixins/arrowNavigation.js b/src/mixins/arrowNavigation.js
index e1ed38542..fb48370b7 100644
--- a/src/mixins/arrowNavigation.js
+++ b/src/mixins/arrowNavigation.js
@@ -43,7 +43,7 @@ const arrowNavigation = {
 		mountArrowNavigation() {
 			document.addEventListener('keydown', (event) => {
 				// https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
-				if (this.isFocused()) {
+				if (this.isSearching) {
 					// If arrow down, focus next result
 					if (event.key === 'ArrowDown') {
 						this.focusNext(event)