RocketChat / RocketChat/Rocket.Chat

BUG - View scroll position is sticky when switching channels

Open
#27,774 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type: bug
Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

As a user, I would like the scroll to be on the first unread message when changing channels. If there are no new messages, I would like the scroll to be positioned on the last read message.

Currently, when switching channels, the scroll will be positioned at the position of the previous channel

Steps to reproduce:
  1. Go to message room with some messages and go up the page
  2. Switch channel
  3. Look that the scroll position is the same as the previous channel
Expected behavior:

The scroll position must be at the position of the last unviewed message. If you do not have new messages, when changing channels, you should see the last message received.

If I am on Test1 channel reading the messages from above, I expect that when I move to another channel the scroll position is on the first unread message or, if there are no new messages, the scroll position is on the bottom of the page

Look the exemple:

  1. I'm on dasdasd channel reading the messages above
    Screenshot from 2023-01-16 23-56-17

  2. When I change to General channel I expect to see the first unread message or the bottom of page
    Screenshot from 2023-01-17 00-08-37

Actual behavior:

Currently, when switching channels, the scroll position remains at the same position as the scroll on the previous page.

  1. Here I am on dasdasd channel

Screenshot from 2023-01-16 23-56-17

  1. Now I am on General channel
    Screenshot from 2023-01-16 23-57-15

Look that is the same position of scroll in both channels.

Server Setup Information:
  • Version of Rocket.Chat Server: 6.0
  • Operating System: Linux
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled
  • NodeJS Version: 14.21.2
  • MongoDB Version: 5.0.5
Client Setup Information
  • Operating System: Linux
Where to find in code

You can start looking MessageList.tsx
path: apps/meteor/client/views/room/MessageList/MessageList.tsx

And also RoomBody.tsx
path: apps/meteor/client/views/room/components/body/RoomBody.tsx

In RoomBody.tsx you can find some methods about send to bottom:

Screenshot from 2023-01-17 00-51-38

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with apps/meteor/client/views/room/MessageList/MessageList.tsx and apps/meteor/client/views/room/components/body/RoomBody.tsx, especially the existing methods related to sending the view to the bottom. Reproduce the issue by scrolling up in one channel and switching to another. Done means channel changes show the first unread message, or the last message at the bottom when there are no unread messages, rather than preserving the previous channel’s scroll position.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.