Merge pull request #4836 from nextcloud/bugfix/4833/fix-conversations-list-scrolling

Scroll to conversation only in specific cases

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -76,34 +76,35 @@ export default {
 	mounted() {
 		EventBus.$on('routeChange', this.onRouteChange)
 		EventBus.$on('newMessagePosted', this.onMessagePosted)
-		EventBus.$on('joinedConversation', this.onJoinedConversation)
+
+		EventBus.$once('joinedConversation', ({ token }) => {
+			this.scrollToConversation(token)
+		})
 	},
 
 	beforeDestroy() {
 		EventBus.$off('routeChange', this.onRouteChange)
 		EventBus.$off('newMessagePosted', this.onMessagePosted)
-		EventBus.$off('joinedConversation', this.onJoinedConversation)
 	},
 
 	methods: {
 		scrollToConversation(token) {
-			const conversation = document.getElementById(`conversation_${token}`)
-			if (!conversation) {
-				return
-			}
-			this.$nextTick(() => {
-				conversation.scrollIntoView({
-					behavior: 'smooth',
-					block: 'start',
-					inline: 'nearest',
+			// FIXME: not sure why we can't scroll earlier even when the element exists already
+			// when too early, Firefox only scrolls a few pixels towards the element but
+			// not enough to make it visible
+			setTimeout(() => {
+				const conversation = document.getElementById(`conversation_${token}`)
+				if (!conversation) {
+					return
+				}
+				this.$nextTick(() => {
+					conversation.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start',
+						inline: 'nearest',
+					})
 				})
-			})
-		},
-		onJoinedConversation({ token }) {
-			this.scrollToConversation(token)
-		},
-		onMessagePosted({ token }) {
-			this.scrollToConversation(token)
+			}, 500)
 		},
 		onRouteChange({ from, to }) {
 			if (from.name === 'conversation'

src/components/LeftSidebar/LeftSidebar.vue

@@ -37,6 +37,7 @@
 				:title="t('spreed', 'Conversations')" />
 			<li role="presentation">
 				<ConversationsList
+					ref="conversationsList"
 					:conversations-list="conversationsList"
 					:initialised-conversations="initialisedConversations"
 					:search-text="searchText"
@@ -354,16 +355,22 @@ export default {
 				response = await createGroupConversation(item.id, item.source)
 			}
 			const conversation = response.data.ocs.data
+			this.abortSearch()
+			EventBus.$once('joinedConversation', ({ token }) => {
+				this.$refs.conversationsList.scrollToConversation(token)
+			})
 			this.$store.dispatch('addConversation', conversation)
 			this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
-			EventBus.$emit('resetSearchFilter')
 		},
 
 		async joinListedConversation(conversation) {
+			this.abortSearch()
+			EventBus.$once('joinedConversation', ({ token }) => {
+				this.$refs.conversationsList.scrollToConversation(token)
+			})
 			// add as temporary item that will refresh after the joining process is complete
 			this.$store.dispatch('addConversation', conversation)
 			this.$router.push({ name: 'conversation', params: { token: conversation.token } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
-			EventBus.$emit('resetSearchFilter')
 		},
 
 		hasOneToOneConversationWith(userId) {
@@ -386,6 +393,9 @@ export default {
 		},
 
 		handleClickSearchResult(selectedConversationToken) {
+			EventBus.$once('joinedConversation', ({ token }) => {
+				this.$refs.conversationsList.scrollToConversation(token)
+			})
 			// End the search operation
 			this.abortSearch()
 		},