Key EventTile's using txnId if it is set to prevent a remount

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-22 11:10:55 +01:00
parent 636b0236b6
commit 7c1935a44e
1 changed files with 6 additions and 8 deletions

View File

@ -346,9 +346,9 @@ export default class MessagePanel extends React.Component {
} }
} }
_isUnmounting() { _isUnmounting = () => {
return !this._isMounted; return !this._isMounted;
} };
// TODO: Implement granular (per-room) hide options // TODO: Implement granular (per-room) hide options
_shouldShowEvent(mxEv) { _shouldShowEvent(mxEv) {
@ -571,12 +571,10 @@ export default class MessagePanel extends React.Component {
const readReceipts = this._readReceiptsByEvent[eventId]; const readReceipts = this._readReceiptsByEvent[eventId];
// Dev note: `this._isUnmounting.bind(this)` is important - it ensures that // use txnId as key if available so that we don't remount during sending
// 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).
ret.push( ret.push(
<li key={eventId} <li
key={mxEv.getTxnId() || eventId}
ref={this._collectEventNode.bind(this, eventId)} ref={this._collectEventNode.bind(this, eventId)}
data-scroll-tokens={scrollToken} data-scroll-tokens={scrollToken}
> >
@ -590,7 +588,7 @@ export default class MessagePanel extends React.Component {
readReceipts={readReceipts} readReceipts={readReceipts}
readReceiptMap={this._readReceiptMap} readReceiptMap={this._readReceiptMap}
showUrlPreview={this.props.showUrlPreview} showUrlPreview={this.props.showUrlPreview}
checkUnmounting={this._isUnmounting.bind(this)} checkUnmounting={this._isUnmounting}
eventSendStatus={mxEv.getAssociatedStatus()} eventSendStatus={mxEv.getAssociatedStatus()}
tileShape={this.props.tileShape} tileShape={this.props.tileShape}
isTwelveHour={this.props.isTwelveHour} isTwelveHour={this.props.isTwelveHour}