get rid of native form in SearchBox.vue, expose focus method

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

2 files changed, 28 insertions, 43 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index c66964f75..8e24d61fc 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -23,17 +23,16 @@
 	<NcAppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
-			<SearchBox ref="searchbox"
-				:value.sync="searchText"
-				class="conversations-search"
-				:class="{'conversations-search--expanded': isFocused}"
-				:is-searching="isSearching"
-				@focus="setIsFocused"
-				@blur="setIsFocused"
-				@input="debounceFetchSearchResults"
-				@submit="onInputEnter"
-				@keydown.enter.native="handleEnter"
-				@abort-search="abortSearch" />
+			<div class="conversations-search"
+				:class="{'conversations-search--expanded': isFocused}">
+				<SearchBox ref="searchBox"
+					:value.sync="searchText"
+					:is-searching="isSearching"
+					@focus="setIsFocused"
+					@blur="setIsFocused"
+					@input="debounceFetchSearchResults"
+					@abort-search="abortSearch" />
+			</div>
 
 			<!-- Filters -->
 			<div class="filters"
@@ -667,13 +666,6 @@ export default {
 			this.handleUnreadMention()
 		}, 50),
 
-		// Route to the first search result
-		handleEnter() {
-			if (this?.conversationsList[0]?.token) {
-				this.$router.push({ name: 'conversation', params: { token: this.conversationsList[0].token } })
-			}
-		},
-
 		scrollToConversation(token) {
 			this.$nextTick(() => {
 				// In Vue 2 ref on v-for is always an array and its order is not guaranteed to match the order of v-for source
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index 67cbdb72e..e6392c8ce 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -20,19 +20,17 @@
 -->
 
 <template>
-	<form @submit.prevent="handleSubmit">
-		<NcTextField ref="searchConversations"
-			:value="value"
-			:label="placeholderText"
-			:show-trailing-button="isSearching"
-			trailing-button-icon="close"
-			v-on="$listeners"
-			@update:value="updateValue"
-			@trailing-button-click="abortSearch"
-			@keypress.enter="handleSubmit">
-			<Magnify :size="16" />
-		</NcTextField>
-	</form>
+	<NcTextField ref="searchConversations"
+		:value="value"
+		:label="placeholderText"
+		:show-trailing-button="isSearching"
+		trailing-button-icon="close"
+		v-on="$listeners"
+		@update:value="updateValue"
+		@trailing-button-click="abortSearch"
+		@keydown.esc="abortSearch">
+		<Magnify :size="16" />
+	</NcTextField>
 </template>
 
 <script>
@@ -72,6 +70,8 @@ export default {
 		},
 	},
 
+	expose: ['focus'],
+
 	emits: ['update:value', 'input', 'submit', 'abort-search'],
 
 	computed: {
@@ -95,29 +95,22 @@ export default {
 			this.$emit('update:value', value)
 			this.$emit('input', value)
 		},
-		// Focus the input field of the searchbox component.
-		focusInput() {
-			this.$refs.searchConversations.$el.focus()
+		// Focuses the input.
+		focus() {
+			this.$refs.searchConversations.focus()
 		},
 		// Focuses the input if the current route is root.
 		focusInputIfRoot() {
 			if (this.$route.name === 'root') {
-				this.focusInput()
+				this.focus()
 			}
 		},
 		/**
-		 * When the form is submitted we send this event up in order to allow for example
-		 * to select the first search result and trigger a route change in the main view.
-		 */
-		handleSubmit() {
-			this.$emit('submit')
-		},
-		/**
 		 * Emits the abort-search event and re-focuses the input
 		 */
 		abortSearch() {
 			this.$emit('abort-search')
-			this.focusInput()
+			this.focus()
 		},
 	},
 }