From aadb64615f29020348d7315e92494a33b0825c40 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 2 Mar 2022 11:46:51 -0500
Subject: [PATCH] Fix duplicate EventListSummarys (#7952)

* Fix duplicate EventListSummarys

Signed-off-by: Robin Townsend <robin@robin.town>

* Add regression test

Signed-off-by: Robin Townsend <robin@robin.town>
---
 src/components/structures/MessagePanel.tsx    | 11 ++++---
 .../structures/MessagePanel-test.js           | 29 +++++++++++++++++++
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx
index cd7824ca50..20af21a9e5 100644
--- a/src/components/structures/MessagePanel.tsx
+++ b/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;
diff --git a/test/components/structures/MessagePanel-test.js b/test/components/structures/MessagePanel-test.js
index 7bf74ce88b..aaf24e136d 100644
--- a/test/components/structures/MessagePanel-test.js
+++ b/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);
+    });
 });