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

@@ -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,
+                // melsIndex is deliberately unrelated to the contained events so that pagination
-                // so use the key "membereventlistsummary-initial". Otherwise, use the ID of the first
+                // will not cause it to be recreated.
-                // membership event, which will not change during forward pagination.
+                const key = "membereventlistsummary-" + melsIndex;
-                const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
+                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>
                 );

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();
     },
 
     /**