Fix duplicate EventListSummarys

src/components/structures/MessagePanel.tsx

@@ -1290,12 +1290,11 @@ class MainGrouper extends BaseGrouper {
         const keyEvent = this.events.find(e => this.panel.grouperKeyMap.get(e));
         const key = keyEvent ? this.panel.grouperKeyMap.get(keyEvent) : this.generateKey();
         if (!keyEvent) {
-            // Populate the weak map with the key that we are using for all related events.
-            this.events.forEach(e => {
-                if (!this.panel.grouperKeyMap.has(e)) {
-                    this.panel.grouperKeyMap.set(e, key);
-                }
-            });
+            // Populate the weak map with the key.
+            // Note that we only set the key on the specific event it refers to, since this group might get
+            // split up in the future by other intervening events. If we were to set the key on all events
+            // currently in the group, we would risk later giving the same key to multiple groups.
+            this.panel.grouperKeyMap.set(this.events[0], key);
         }
 
         let highlightInSummary = false;

test/components/structures/MessagePanel-test.js

@@ -572,4 +572,33 @@ describe('MessagePanel', function() {
         expect(els.key()).toEqual("eventlistsummary-" + events[0].getId());
         expect(els.prop("events").length).toEqual(11);
     });
+
+    it('assigns different keys to summaries that get split up', () => {
+        const events = mkMelsEvents().slice(1, 11);
+
+        const res = mount(<WrappedMessagePanel events={events} />);
+        let els = res.find("EventListSummary");
+        expect(els.length).toEqual(1);
+        expect(els.key()).toEqual("eventlistsummary-" + events[0].getId());
+        expect(els.prop("events").length).toEqual(10);
+
+        res.setProps({
+            events: [
+                ...events.slice(0, 5),
+                TestUtilsMatrix.mkMessage({
+                    event: true,
+                    room: "!room:id",
+                    user: "@user:id",
+                    msg: "Hello!",
+                }),
+                ...events.slice(5, 10),
+            ],
+        });
+
+        els = res.find("EventListSummary");
+        expect(els.length).toEqual(2);
+        expect(els.first().key()).not.toEqual(els.last().key());
+        expect(els.first().prop("events").length).toEqual(5);
+        expect(els.last().prop("events").length).toEqual(5);
+    });
 });