patch

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

2 files changed, 46 insertions, 2 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index e5d801a41..bc6fab1b3 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -446,6 +446,7 @@ 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
index b40897a16..ce5f33914 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -23,9 +23,11 @@
 	<NcTextField ref="searchConversations"
 		:value="value"
 		:label="placeholderText"
-		:show-trailing-button="isSearching"
+		:show-trailing-button="isFocused"
 		trailing-button-icon="close"
-		v-on="$listeners"
+		v-on="listeners"
+		@focus="handleFocus"
+		@blur="handleBlur"
 		@update:value="updateValue"
 		@trailing-button-click="abortSearch"
 		@keydown.esc="abortSearch">
@@ -75,6 +77,13 @@ export default {
 	emits: ['update:value', 'input', 'submit', 'abort-search'],
 
 	computed: {
+		listeners() {
+			return Object.assign({}, this.$listeners, {
+				focus: this.handleFocus,
+				blur: this.handleBlur,
+			})
+		},
+
 		cancelSearchLabel() {
 			return t('spreed', 'Cancel search')
 		},
@@ -112,6 +121,40 @@ export default {
 			this.$emit('abort-search')
 			this.focus()
 		},
+
+		handleFocus(event) {
+			this.$emit('focus', event)
+		},
+		handleBlur(event) {
+			console.log('inner blur')
+			if (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
+				})
+			} else {
+				this.$emit('blur', event)
+			}
+		},
+
+		handleFocus(event) {
+			this.$emit('focus', event)
+		},
+		handleBlur(event) {
+			console.log('inner blur')
+			if (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
+				})
+			} else {
+				this.$emit('blur', event)
+			}
+		},
 	},
 }
 </script>