diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index 1fce07c4212..77676a906cb 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -28,6 +28,7 @@ @@ -312,6 +313,7 @@ export default { setup() { const leftSidebar = ref(null) const searchBox = ref(null) + const container = ref(null) const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item') @@ -320,6 +322,7 @@ export default { resetNavigation, leftSidebar, searchBox, + container, } }, @@ -791,6 +794,7 @@ export default { } } if (to.name === 'conversation') { + this.abortSearch() this.$store.dispatch('joinConversation', { token: to.params.token }) this.scrollToConversation(to.params.token) } diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue index a97341421ec..4ffe470fa4d 100644 --- a/src/components/LeftSidebar/SearchBox/SearchBox.vue +++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue @@ -67,6 +67,13 @@ export default { type: Boolean, required: true, }, + /** + * Conversations list reference for handling click trigger + */ + list: { + type: HTMLElement, + default: null, + }, }, expose: ['focus'], @@ -136,16 +143,22 @@ export default { }, handleBlur(event) { + // Blur triggered by clicking on the trailing button if (event.relatedTarget?.classList.contains('input-field__clear-button')) { event.preventDefault() this.getTrailingButton()?.addEventListener('blur', (trailingEvent) => { this.handleBlur(trailingEvent) }) - } else { - this.$emit('blur', event) - if (this.value === '') { - this.$emit('update:is-focused', false) - } + return + } + // Blur triggered by clicking on a conversation item + if (this.list?.contains(event.relatedTarget)) { + return + } + // Blur in other cases + this.$emit('blur', event) + if (this.value === '') { + this.$emit('update:is-focused', false) } },