upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-02-03 20:40:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

[MM-34462] Fix highlighted message not centered when opening permalink

Browse source
This commit is contained in:
manthansubhash01 2025-11-17 23:01:03 +05:30
parent fc6551c8ed
commit f56fcece35
1 changed files with 51 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
webapp/channels/src/components/dynamic_virtualized_list/index.jsx
View file

@ -27,6 +27,10 @@ export class DynamicVirtualizedList extends PureComponent {
_keepScrollToBottom = false;
_mountingCorrections = 0;
_correctedInstances = 0;
_isPermalinkMode = false;
_permalinkItemId = null;
_permalinkStabilizationTimer = null;
_heightChangesCount = 0;
static defaultProps = {
innerTagName: 'div',
@ -97,6 +101,17 @@ export class DynamicVirtualizedList extends PureComponent {
//Ideally the below scrollTo works fine but firefox has 6px issue and stays 6px from bottom when corrected
//so manually keeping scroll position bottom for now
if (align === 'center' && index > 0 && this.props.itemData) {
this._isPermalinkMode = true;
this._permalinkItemId = this.props.itemData[index];
this._heightChangesCount = 0;
// Clear existing timer
if (this._permalinkStabilizationTimer) {
clearTimeout(this._permalinkStabilizationTimer);
}
}
const element = this._outerRef;
if (index === 0 && align === 'end') {
this.scrollTo(element.scrollHeight - this.props.height);
@ -215,6 +230,9 @@ export class DynamicVirtualizedList extends PureComponent {
if (this._scrollByCorrection) {
window.cancelAnimationFrame(this._scrollByCorrection);
}
if (this._permalinkStabilizationTimer) {
clearTimeout(this._permalinkStabilizationTimer);
}
}
_callOnItemsRendered = memoizeOne((overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) =>
@ -495,6 +513,39 @@ export class DynamicVirtualizedList extends PureComponent {
return;
}
if (this._isPermalinkMode && this._permalinkItemId) {
const permalinkIndex = itemData.findIndex((item) => item === this._permalinkItemId);
if (permalinkIndex !== -1) {
this._heightChangesCount++;
this._generateOffsetMeasurements();
// Recenter the permalink item
this.scrollToItem(permalinkIndex, 'center');
this.forceUpdate();
if (this._permalinkStabilizationTimer) {
clearTimeout(this._permalinkStabilizationTimer);
}
this._permalinkStabilizationTimer = setTimeout(() => {
if (this._heightChangesCount < 20) {
this._isPermalinkMode = false;
this._permalinkItemId = null;
this._heightChangesCount = 0;
}
}, 2000);
if (this._heightChangesCount >= 20) {
this._isPermalinkMode = false;
this._permalinkItemId = null;
this._heightChangesCount = 0;
}
return;
}
}
if (forceScrollCorrection || this._keepScrollPosition) {
const delta = newSize - oldSize;
const [, , visibleStartIndex] = this._getRangeToRender(this.state.scrollOffset);