Search box fixes

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

1 files changed, 8 insertions, 17 deletions

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