Fix scroll jumping on MessageBox mount

This commit is contained in:
Ken-Håvard Lieng 2018-11-22 08:46:19 +01:00
parent 937480bfd4
commit 0699fc287d
2 changed files with 61 additions and 66 deletions

File diff suppressed because one or more lines are too long

View File

@ -27,18 +27,6 @@ export default class MessageBox extends PureComponent {
this.loadScrollPos(); this.loadScrollPos();
} }
componentDidMount() {
const scrollToBottom = this.bottom;
window.requestAnimationFrame(() => {
const { messages } = this.props;
if (scrollToBottom && messages.length > 0) {
this.list.current.scrollToItem(messages.length + 1);
}
});
}
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (prevProps.tab !== this.props.tab) { if (prevProps.tab !== this.props.tab) {
this.loadScrollPos(true); this.loadScrollPos(true);
@ -123,6 +111,8 @@ export default class MessageBox extends PureComponent {
loadScrollPos = scroll => { loadScrollPos = scroll => {
const pos = getScrollPos(this.updateScrollKey()); const pos = getScrollPos(this.updateScrollKey());
const { messages } = this.props;
if (pos >= 0) { if (pos >= 0) {
this.bottom = false; this.bottom = false;
if (scroll) { if (scroll) {
@ -133,7 +123,12 @@ export default class MessageBox extends PureComponent {
} else { } else {
this.bottom = true; this.bottom = true;
if (scroll) { if (scroll) {
this.list.current.scrollToItem(this.props.messages.length + 1); this.list.current.scrollToItem(messages.length + 1);
} else if (messages.length > 0) {
this.initialScrollTop = 0;
for (let i = 0; i < messages.length; i++) {
this.initialScrollTop += messages[i].height;
}
} }
} }
}; };