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(); + 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); + }); });