From 6fead66f8920d1b9c76431bd9f46e8dc3099f655 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 20 Feb 2017 10:59:11 +0000
Subject: [PATCH] MELS: check scroll on load + use mels-1,-2,... key

To fix https://github.com/vector-im/riot-web/issues/2916, force the checking of scroll position by calling _onWidgetLoad (might need renaming...) when a MELS is expanded/contracted.

Also use an keying scheme for MELS that doesn't depend on the events contained, but rather a simple incrementing index based on the order of the MELS as it appears amongst all MELS.
---
 src/components/structures/MessagePanel.js           | 13 ++++++++-----
 .../views/elements/MemberEventListSummary.js        |  3 +++
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index dcebe38fa4..6b61759344 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -237,6 +237,7 @@ module.exports = React.createClass({
         this.eventNodes = {};
 
         var i;
+        let melsIndex = 0;
 
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
@@ -302,10 +303,10 @@ module.exports = React.createClass({
                 // instead will allow new props to be provided. In turn, the shouldComponentUpdate
                 // method on MELS can be used to prevent unnecessary renderings.
                 //
-                // Whilst back-paginating with a MELS at the top of the panel, prevEvent will be null,
-                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
-                // membership event, which will not change during forward pagination.
-                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
+                // melsIndex is deliberately unrelated to the contained events so that pagination
+                // will not cause it to be recreated.
+                const key = "membereventlistsummary-" + melsIndex;
+                melsIndex++;
 
                 if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
                     let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
@@ -349,7 +350,9 @@ module.exports = React.createClass({
                     <MemberEventListSummary
                         key={key}
                         events={summarisedEvents}
-                        data-scroll-token={eventId}>
+                        data-scroll-token={eventId}
+                        onToggle={this._onWidgetLoad} // Update scroll state
+                    >
                             {eventTiles}
                     </MemberEventListSummary>
                 );
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 510d861730..a3c31ae65b 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -30,6 +30,8 @@ module.exports = React.createClass({
         avatarsMaxLength: React.PropTypes.number,
         // The minimum number of events needed to trigger summarisation
         threshold: React.PropTypes.number,
+        // Called when the MELS expansion is toggled
+        onToggle: React.PropTypes.func,
     },
 
     getInitialState: function() {
@@ -63,6 +65,7 @@ module.exports = React.createClass({
         this.setState({
             expanded: !this.state.expanded,
         });
+        this.props.onToggle();
     },
 
     /**