diff --git a/src/components/structures/TimelinePanel.tsx b/src/components/structures/TimelinePanel.tsx index 9f9d1acd3b7..d2a3f390b4d 100644 --- a/src/components/structures/TimelinePanel.tsx +++ b/src/components/structures/TimelinePanel.tsx @@ -309,8 +309,8 @@ class TimelinePanel extends React.Component { this.initTimeline(this.props); } - public componentDidUpdate(newProps) { - if (newProps.timelineSet !== this.props.timelineSet) { + public componentDidUpdate(prevProps) { + if (prevProps.timelineSet !== this.props.timelineSet) { // throw new Error("changing timelineSet on a TimelinePanel is not supported"); // regrettably, this does happen; in particular, when joining a @@ -325,13 +325,13 @@ class TimelinePanel extends React.Component { logger.warn("Replacing timelineSet on a TimelinePanel - confusion may ensue"); } - const differentEventId = newProps.eventId != this.props.eventId; - const differentHighlightedEventId = newProps.highlightedEventId != this.props.highlightedEventId; - const differentAvoidJump = newProps.eventScrollIntoView && !this.props.eventScrollIntoView; + const differentEventId = prevProps.eventId != this.props.eventId; + const differentHighlightedEventId = prevProps.highlightedEventId != this.props.highlightedEventId; + const differentAvoidJump = prevProps.eventScrollIntoView && !this.props.eventScrollIntoView; if (differentEventId || differentHighlightedEventId || differentAvoidJump) { - logger.log(`TimelinePanel switching to eventId ${newProps.eventId} (was ${this.props.eventId}), ` + - `scrollIntoView: ${newProps.eventScrollIntoView} (was ${this.props.eventScrollIntoView})`); - this.initTimeline(newProps); + logger.log(`TimelinePanel switching to eventId ${this.props.eventId} (was ${prevProps.eventId}), ` + + `scrollIntoView: ${this.props.eventScrollIntoView} (was ${prevProps.eventScrollIntoView})`); + this.initTimeline(this.props); } } diff --git a/test/components/structures/TimelinePanel-test.tsx b/test/components/structures/TimelinePanel-test.tsx index 542f0c88878..6082c7e7514 100644 --- a/test/components/structures/TimelinePanel-test.tsx +++ b/test/components/structures/TimelinePanel-test.tsx @@ -45,7 +45,7 @@ const newReceipt = (eventId: string, userId: string, readTs: number, fullyReadTs return new MatrixEvent({ content: receiptContent, type: EventType.Receipt }); }; -const renderPanel = (room: Room, events: MatrixEvent[]): RenderResult => { +const getProps = (room: Room, events: MatrixEvent[]): TimelinePanel["props"] => { const timelineSet = { room: room as Room } as EventTimelineSet; const timeline = new EventTimeline(timelineSet); events.forEach((event) => timeline.addEvent(event, true)); @@ -54,13 +54,16 @@ const renderPanel = (room: Room, events: MatrixEvent[]): RenderResult => { timelineSet.getPendingEvents = () => events; timelineSet.room.getEventReadUpTo = () => events[1].getId(); - return render( - , - ); + return { + timelineSet, + manageReadReceipts: true, + sendReadReceiptOnLoad: true, + }; +}; + +const renderPanel = (room: Room, events: MatrixEvent[]): RenderResult => { + const props = getProps(room, events); + return render(); }; const mockEvents = (room: Room, count = 2): MatrixEvent[] => { @@ -172,4 +175,21 @@ describe('TimelinePanel', () => { expect(client.setRoomReadMarkers).toHaveBeenCalledWith(room.roomId, "", undefined, events[0]); }); }); + + it("should scroll event into view when props.eventId changes", () => { + const client = MatrixClientPeg.get(); + const room = mkRoom(client, "roomId"); + const events = mockEvents(room); + + const props = { + ...getProps(room, events), + onEventScrolledIntoView: jest.fn(), + }; + + const { rerender } = render(); + expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined); + props.eventId = events[1].getId(); + rerender(); + expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(events[1].getId()); + }); });