Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Ensure read receipts end up with a valid reference to checkUnmounting
Browse files Browse the repository at this point in the history
Fixes element-hq/element-web#11496
Fixes element-hq/element-web#11385
Fixes element-hq/element-web#10007
Fixes element-hq/element-web#9769

React does (kinda) bind `this._isUnmounting` for us in the context of the EventTile, but the EventTile then passes the function straight through to the ReadReceiptMarker component, which then binds it in the context of EventTile. This results in `this._mounted` being falsey all the time, preventing the ReadReceiptMarker from hitting the code where it updates rrInfo in its unmount. 

The velocity stuff is smart enough to realize that it has a read receipt and shuffles everything over by one, but when it goes to check the starting height (which will be null/undefined because the RRMarker didn't update it) it assumes it has never seen the receipt before and appends it again - this is what causes some holes/stacking.

By forcefully binding the `this._isUnmounting` function we ensure that the `this._mounted` variable is correctly referenced in the context of the MessagePanel, allowing the RRMarker to update its position, and therefore allowing the velocity behaviour to be consistent.
  • Loading branch information
turt2live committed Nov 29, 2019
1 parent 25809c5 commit 36f9fab
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/components/structures/MessagePanel.js
Original file line number Diff line number Diff line change
Expand Up @@ -693,6 +693,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).
ret.push(
<li key={eventId}
ref={this._collectEventNode.bind(this, eventId)}
Expand All @@ -707,7 +711,7 @@ export default class MessagePanel extends React.Component {
readReceipts={readReceipts}
readReceiptMap={this._readReceiptMap}
showUrlPreview={this.props.showUrlPreview}
checkUnmounting={this._isUnmounting}
checkUnmounting={this._isUnmounting.bind(this)}
eventSendStatus={mxEv.getAssociatedStatus()}
tileShape={this.props.tileShape}
isTwelveHour={this.props.isTwelveHour}
Expand Down

0 comments on commit 36f9fab

Please sign in to comment.