Regression: Fix scroll to bottom (RocketChat#21731)

ggazzo · web-flow · commit 47a61f2523f9 · 2021-04-22T22:44:24.000-03:00
diff --git a/app/ui/client/views/app/room.js b/app/ui/client/views/app/room.js
@@ -782,6 +782,10 @@ Meteor.startup(() => {
 		callbacks.remove('streamNewMessage', this.data._id);
 	});
 
+	const isAtBottom = function(element, scrollThreshold = 0) {
+		return element.scrollTop + scrollThreshold >= element.scrollHeight - element.clientHeight;
+	};
+
 	Template.roomOld.onRendered(function() {
 		const { _id: rid } = this.data;
 
@@ -794,16 +798,16 @@ Meteor.startup(() => {
 		const store = NewRoomManager.getStore(rid);
 
 		const afterMessageGroup = () => {
-			if (store.scroll) {
+			if (store.scroll && !store.atBottom) {
 				wrapper.scrollTop = store.scroll;
 			} else {
 				this.sendToBottom();
 			}
 			wrapper.removeEventListener('MessageGroup', afterMessageGroup);
 
 			wrapper.addEventListener('scroll', _.throttle(() => {
-				store.update({ scroll: wrapper.scrollTop });
-			}, 100));
+				store.update({ scroll: wrapper.scrollTop, atBottom: isAtBottom(wrapper, 50) });
+			}, 30));
 		};
 
 		wrapper.addEventListener('MessageGroup', afterMessageGroup);
@@ -820,7 +824,7 @@ Meteor.startup(() => {
 		const messageBox = $('.messages-box');
 
 		template.isAtBottom = function(scrollThreshold = 0) {
-			if (wrapper.scrollTop + scrollThreshold >= wrapper.scrollHeight - wrapper.clientHeight) {
+			if (isAtBottom(wrapper, scrollThreshold)) {
 				newMessage.className = 'new-message background-primary-action-color color-content-background-color not';
 				return true;
 			}
@@ -857,7 +861,6 @@ Meteor.startup(() => {
 		});
 
 		Tracker.afterFlush(() => {
-			template.sendToBottomIfNecessary();
 			wrapper.addEventListener('scroll', wheelHandler);
 		});
 
diff --git a/client/lib/RoomManager.ts b/client/lib/RoomManager.ts
@@ -17,19 +17,33 @@ export class RoomStore extends Emitter<{
 
 	scroll?: number;
 
+	atBottom = true;
+
 	constructor(readonly rid: string) {
 		super();
 
 		debug && this.on('changed', () => console.log(`RoomStore ${this.rid} changed`, this));
 	}
 
-	update({ scroll, lastTime }: { scroll?: number; lastTime?: Date }): void {
+	update({
+		scroll,
+		lastTime,
+		atBottom,
+	}: {
+		scroll?: number;
+		lastTime?: Date;
+		atBottom?: boolean;
+	}): void {
 		if (scroll !== undefined) {
 			this.scroll = scroll;
 		}
 		if (lastTime !== undefined) {
 			this.lastTime = lastTime;
 		}
+
+		if (atBottom !== undefined) {
+			this.atBottom = atBottom;
+		}
 		if (scroll || lastTime) {
 			this.emit('changed');
 		}
