Fix regression with TimelinePanel props updates not taking effect (#9608

)

* Fix regression with TimelinePanel props updates not taking effect

* Add test

src/components/structures/TimelinePanel.tsx

@@ -309,8 +309,8 @@ class TimelinePanel extends React.Component<IProps, IState> {
         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<IProps, IState> {
             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);
         }
     }
 

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(
-        <TimelinePanel
-            timelineSet={timelineSet}
-            manageReadReceipts
-            sendReadReceiptOnLoad
-        />,
-    );
+    return {
+        timelineSet,
+        manageReadReceipts: true,
+        sendReadReceiptOnLoad: true,
+    };
+};
+
+const renderPanel = (room: Room, events: MatrixEvent[]): RenderResult => {
+    const props = getProps(room, events);
+    return render(<TimelinePanel {...props} />);
 };
 
 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(<TimelinePanel {...props} />);
+        expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined);
+        props.eventId = events[1].getId();
+        rerender(<TimelinePanel {...props} />);
+        expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(events[1].getId());
+    });
 });