imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix thread list jumping back down while scrolling (#9606)

Browse source 
* Fix timeline jumping after every thread update

* Add tests to prevent this from occuring again
This commit is contained in:
Janne Mareike Koschinski 2022-11-25 13:22:06 +01:00 • committed by GitHub
parent 5c60211d76
commit 55d9dbf00d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 218 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/structures/TimelinePanel.tsx
View file

@ -27,7 +27,7 @@ import { RoomMember, RoomMemberEvent } from 'matrix-js-sdk/src/models/room-membe
import { debounce, throttle } from 'lodash';
import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { Thread } from 'matrix-js-sdk/src/models/thread';
import { Thread, ThreadEvent } from 'matrix-js-sdk/src/models/thread';
import { ReceiptType } from "matrix-js-sdk/src/@types/read_receipts";
import { MatrixError } from 'matrix-js-sdk/src/http-api';
import { ReadReceipt } from 'matrix-js-sdk/src/models/read-receipt';
@ -297,6 +297,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
cli.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
cli.on(MatrixEventEvent.Replaced, this.onEventReplaced);
cli.on(ClientEvent.Sync, this.onSync);
this.props.timelineSet.room?.on(ThreadEvent.Update, this.onThreadUpdate);
}
public componentDidMount() {
@ -325,6 +327,9 @@ class TimelinePanel extends React.Component<IProps, IState> {
logger.warn("Replacing timelineSet on a TimelinePanel - confusion may ensue");
}
this.props.timelineSet.room?.off(ThreadEvent.Update, this.onThreadUpdate);
this.props.timelineSet.room?.on(ThreadEvent.Update, this.onThreadUpdate);
const differentEventId = prevProps.eventId != this.props.eventId;
const differentHighlightedEventId = prevProps.highlightedEventId != this.props.highlightedEventId;
const differentAvoidJump = prevProps.eventScrollIntoView && !this.props.eventScrollIntoView;
@ -366,6 +371,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
client.removeListener(MatrixEventEvent.Replaced, this.onEventReplaced);
client.removeListener(MatrixEventEvent.VisibilityChange, this.onEventVisibilityChange);
client.removeListener(ClientEvent.Sync, this.onSync);
this.props.timelineSet.room?.removeListener(ThreadEvent.Update, this.onThreadUpdate);
}
}
@ -742,6 +748,25 @@ class TimelinePanel extends React.Component<IProps, IState> {
this.forceUpdate();
};
private onThreadUpdate = (thread: Thread): void => {
if (this.unmounted) {
return;
}
// ignore events for other rooms
const roomId = thread.roomId;
if (roomId !== this.props.timelineSet.room?.roomId) {
return;
}
// we could skip an update if the event isn't in our timeline,
// but that's probably an early optimisation.
const tile = this.messagePanel.current?.getTileForEventId(thread.id);
if (tile) {
tile.forceUpdate();
}
};
// Called whenever the visibility of an event changes, as per
// MSC3531. We typically need to re-render the tile.
private onEventVisibilityChange = (ev: MatrixEvent): void => {