Fix: Ensure links to events scroll the correct events into view (#8250)

Co-authored-by: Janne Mareike Koschinski <jannemk@element.io>
This commit is contained in:
Janne Mareike Koschinski 2022-04-07 13:24:45 +02:00 committed by GitHub
parent 16dc05e2b0
commit e54eb81626
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1175,12 +1175,33 @@ class TimelinePanel extends React.Component<IProps, IState> {
"messagePanel didn't load"); "messagePanel didn't load");
return; return;
} }
const doScroll = () => {
if (eventId) { if (eventId) {
this.messagePanel.current.scrollToEvent(eventId, pixelOffset, debuglog("TimelinePanel scrolling to eventId " + eventId);
offsetBase); this.messagePanel.current.scrollToEvent(
eventId,
pixelOffset,
offsetBase,
);
} else { } else {
debuglog("TimelinePanel scrolling to bottom");
this.messagePanel.current.scrollToBottom(); this.messagePanel.current.scrollToBottom();
} }
};
// Ensure the correct scroll position pre render, if the messages have already been loaded to DOM, to
// avoid it jumping around
doScroll();
// Ensure the correct scroll position post render for correct behaviour.
//
// requestAnimationFrame runs our code immediately after the DOM update but before the next repaint.
//
// If the messages have just been loaded for the first time, this ensures we'll repeat setting the
// correct scroll position after React has re-rendered the TimelinePanel and MessagePanel and updated
// the DOM.
window.requestAnimationFrame(doScroll);
if (this.props.sendReadReceiptOnLoad) { if (this.props.sendReadReceiptOnLoad) {
this.sendReadReceipt(); this.sendReadReceipt();