From 7c1935a44e5b7d91a50a3c5e0fc6dac859a53333 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 22 Jul 2020 11:10:55 +0100
Subject: [PATCH] Key EventTile's using txnId if it is set to prevent a remount

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/MessagePanel.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 7567786af3..230d136e04 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -346,9 +346,9 @@ export default class MessagePanel extends React.Component {
         }
     }
 
-    _isUnmounting() {
+    _isUnmounting = () => {
         return !this._isMounted;
-    }
+    };
 
     // TODO: Implement granular (per-room) hide options
     _shouldShowEvent(mxEv) {
@@ -571,12 +571,10 @@ export default class MessagePanel extends React.Component {
 
         const readReceipts = this._readReceiptsByEvent[eventId];
 
-        // Dev note: `this._isUnmounting.bind(this)` is important - it ensures that
-        // the function is run in the context of this class and not EventTile, therefore
-        // ensuring the right `this._mounted` variable is used by read receipts (which
-        // don't update their position if we, the MessagePanel, is unmounting).
+        // use txnId as key if available so that we don't remount during sending
         ret.push(
-            <li key={eventId}
+            <li
+                key={mxEv.getTxnId() || eventId}
                 ref={this._collectEventNode.bind(this, eventId)}
                 data-scroll-tokens={scrollToken}
             >
@@ -590,7 +588,7 @@ export default class MessagePanel extends React.Component {
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
                         showUrlPreview={this.props.showUrlPreview}
-                        checkUnmounting={this._isUnmounting.bind(this)}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.getAssociatedStatus()}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}