trailing button blur behaviour

Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Jul 25, 2023 · 2a045f2 · 2a045f2
1 parent f7783da
commit 2a045f2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -30,6 +30,7 @@
 				:is-focused="isFocused"
 				@focus="setIsFocused"
 				@blur="setIsFocused"
+				@trailing-blur="setIsFocused"
 				@input="debounceFetchSearchResults"
 				@submit="onInputEnter"
 				@keydown.enter.native="handleEnter"
@@ -76,7 +77,8 @@
 			</div>
 
 			<!-- Actions -->
-			<div class="actions">
+			<div class="actions"
+				:class="{'hidden-visually': isFocused}">
 				<NcActions class="conversations-actions">
 					<template #icon>
 						<DotsVertical :size="20" />
@@ -219,6 +221,7 @@
 import debounce from 'debounce'
 
 import AtIcon from 'vue-material-design-icons/At.vue'
+import ChatPlus from 'vue-material-design-icons/ChatPlus.vue'
 import DotsVertical from 'vue-material-design-icons/DotsVertical.vue'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterRemoveIcon from 'vue-material-design-icons/FilterRemove.vue'
@@ -279,6 +282,7 @@ export default {
 		FilterIcon,
 		FilterRemoveIcon,
 		Plus,
+		ChatPlus,
 		List,
 		DotsVertical,
 	},
@@ -439,7 +443,6 @@ export default {
 		},
 
 		setIsFocused(event) {
-			console.log(event.type)
 			if (this.searchText !== '') {
 				return
 			}

diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -27,8 +27,6 @@
 			:show-trailing-button="isFocused"
 			trailing-button-icon="close"
 			v-on="listeners"
-			@focus="handleFocus"
-			@blur="handleBlur"
 			@update:value="updateValue"
 			@trailing-button-click="abortSearch"
 			@keypress.enter="handleSubmit">
@@ -74,12 +72,11 @@ export default {
 		},
 	},
 
-	emits: ['update:value', 'input', 'submit', 'abort-search'],
+	emits: ['update:value', 'input', 'submit', 'abort-search', 'blur', 'trailing-blur'],
 
 	computed: {
 		listeners() {
 			return Object.assign({}, this.$listeners, {
-				focus: this.handleFocus,
 				blur: this.handleBlur,
 			})
 		},
@@ -129,17 +126,11 @@ export default {
 			this.focusInput()
 		},
 
-		handleFocus(event) {
-			this.$emit('focus', event)
-		},
 		handleBlur(event) {
-			console.log('inner blur')
-			if (Array.from(event.relatedTarget.classList).includes('input-field__clear-button')) {
+			if ((event.relatedTarget) && (Array.from(event.relatedTarget.classList).includes('input-field__clear-button'))) {
 				event.preventDefault()
 				this.$refs.searchConversations.$el.querySelector('.input-field__clear-button').addEventListener('blur', (event) => {
-					console.log('trailing blur')
-					console.log(event)
-					// check if focus goes back to native input or outside, and proceed accordingly
+					this.$emit('trailing-blur', event)
 				})
 			} else {
 				this.$emit('blur', event)