Merge pull request #2893 from nextcloud/feature/noid/add-button-to-end-conversation-search

Add ✕ button to end search

src/components/LeftSidebar/LeftSidebar.vue

@@ -24,7 +24,9 @@
 		<div class="new-conversation">
 			<SearchBox
 				v-model="searchText"
-				@input="debounceFetchSearchResults" />
+				:is-searching="isSearching"
+				@input="debounceFetchSearchResults"
+				@abort-search="abortSearch" />
 			<NewGroupConversation />
 		</div>
 		<ul class="left-sidebar__list">
@@ -33,7 +35,7 @@
 			<li>
 				<ConversationsList
 					:search-text="searchText"
-					@click-conversation="handleClickConversation" />
+					@click-conversation="abortSearch" />
 			</li>
 			<template v-if="isSearching">
 				<template v-if="searchResultsUsers.length !== 0">
@@ -240,7 +242,7 @@ export default {
 			return !!this.conversationsList.find(conversation => conversation.type === CONVERSATION.TYPE.ONE_TO_ONE && conversation.name === userId)
 		},
 		// Reset the search text, therefore end the search operation.
-		handleClickConversation() {
+		abortSearch() {
 			this.searchText = ''
 		},
 

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -29,6 +29,10 @@
 			class="app-navigation-search__input"
 			type="text"
 			:placeHolder="placeholderText">
+		<button
+			v-if="isSearching"
+			class="abort-search icon-close"
+			@click.prevent="abortSearch" />
 	</form>
 </template>
 
@@ -53,6 +57,13 @@ export default {
 			type: String,
 			required: true,
 		},
+		/**
+		 * If true, this component displays an 'x' button to abort the search
+		 */
+		isSearching: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data: function() {
 		return {
@@ -69,20 +80,24 @@ export default {
 		},
 	},
 	mounted() {
-		this.focusInput()
+		this.focusInputIfRoot()
 		/**
-		 * Listen to routeChange global events and focus on the
+		 * Listen to routeChange global events and focus on the input
 		 */
-		EventBus.$on('routeChange', this.focusInput)
+		EventBus.$on('routeChange', this.focusInputIfRoot)
 	},
 	beforeDestroy() {
-		EventBus.$off('routeChange', this.focusInput)
+		EventBus.$off('routeChange', this.focusInputIfRoot)
 	},
 	methods: {
-		// Focus the input field of the current component.
+		// Focus the input field of the searchbox component.
 		focusInput() {
+			this.$refs.searchConversations.focus()
+		},
+		// Focuses the input if the current route is root.
+		focusInputIfRoot() {
 			if (this.$route.name === 'root') {
-				this.$refs.searchConversations.focus()
+				this.focusInput()
 			}
 		},
 		/**
@@ -92,6 +107,13 @@ export default {
 		handleSubmit() {
 			this.$emit('submit')
 		},
+		/**
+		 * Emits the abort-search event and re-focuses the input
+		 */
+		abortSearch() {
+			this.$emit('abort-search')
+			this.focusInput()
+		},
 	},
 }
 </script>
@@ -113,4 +135,12 @@ export default {
 		margin: 0px;
 	}
 }
+
+.abort-search {
+	margin-left: -28px;
+    z-index: 1;
+    border: none;
+    background-color: transparent
+}
+
 </style>

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -25,7 +25,9 @@
 			v-if="displaySearchBox"
 			v-model="searchText"
 			:placeholder-text="t('spreed', 'Add participants to the conversation')"
-			@input="handleInput" />
+			:is-searching="isSearching"
+			@input="handleInput"
+			@abort-search="abortSearch" />
 		<Caption v-if="isSearching"
 			:title="t('spreed', 'Participants')" />
 		<CurrentParticipants
@@ -346,6 +348,11 @@ export default {
 				}
 			}
 		},
+
+		// Ends the search operation
+		abortSearch() {
+			this.searchText = ''
+		},
 	},
 }
 </script>