regression: Floating date bubble displaying wrong date
Proposed changes (including videos or screenshots)
This was a tricky one to debug, as there wasn't much context on why it happened. A huge thanks for @cardoso for the work on https://github.com/RocketChat/Rocket.Chat/pull/38200, it allowed debugging using a real server where the issue was found (open.rocket.chat), and if it weren't for that I don't think I'd have been able to patch this.
The issue is as follows:
The message bubble has 2 possibilities for retrieving the date: It can either find a Date Divider (which self-registers by using DateListProvider, and get the information from it's dataset, or it relies on the topmost visible message if no divider matches the filtering.
The issue started happening because of a fix requested on the original PR, which required that some messages to be kept on the DOM (Virtualizer's keepMounted array prop) in order to avoid files contained inside the message to be downloaded every time it mounted due to scrolling.
The logic on the bubble date gives preference to getting the date from the date dividers, and in doing so relied on the virtualization unmounting the elementing and removing it from the list. Since the date divider is a child of the messages, if the parent message of the divider contained a file, it would never unmount the divider, thus never unregistering from the divider list, and being used as the date source since it would be the "oldest" divider on the list.
In order to fix it we now also check the divider's parent visibility relative to the scroll container. This way any divider that should not be visible will be ignored.
Issue(s)
Root cause: https://github.com/RocketChat/Rocket.Chat/issues/40105
CORE-2248
Steps to test or reproduce
This one is tricky. We need to insert messages with old dates in order to reproduce.
- Send ~50 messages with an old date (like 3 days ago)
- Send a single (or more) file message(s) with a newer date (2 days ago) (This message needs to be exactly the next message after the divider, or else it won't break)
- Send a bunch more messages in that same date (just to create some padding)
- Send a bunch of messages (~50 to ensure the older ones are out of the screen) in the current date
- Refresh the room and scroll back until you load the message with the file
- Scroll back down
Further comments
Summary by CodeRabbit
- Bug Fixes
- Improved date divider visibility and accurate positioning when scrolling through message lists
- Enhanced scroll offset tracking for more reliable date bubble placement in conversations
- Refined date divider detection logic to better handle visibility states and filter invisible dividers
