Loading elements displayBottomUpwards does not accurately update scroll

[yiziz]

I'm trying to make a chat app. I have displayBottomUpwards set as true and I'm using elementHeight to set the container height since each child could have a different height. I'm using an onHeightChange callback that gets called by the children on their componentDidMount func to update the elementHeight array after the they get rendered and their heights can be determined from the DOM. As far as I can tell, the element's heights are being set correctly.

I'm want to load more messages once I scroll to the top. Unfortunately, after I scroll to the top and the messages are loaded into the react infinite element, the scroll position does not update and is still at the top. How do I fix the scroll such that it continues from the spot it was at when messages were being loaded?

I've attached a gif of what's happening. You can see the "jump" to the first previous message, but in reality, the scroll position never changes, the previous messages are just added to the top.

[NickAlvesX]

Same problem here.

[NickAlvesX]

This is my workaround:

handleInfiniteLoad() {
    const {selectedGroup, getMessages} = this.props;

    const messagesAmount = selectedGroup.messages.length;

    if (messagesAmount % LIMIT === 0) {
        this.setState({isInfiniteLoading: true});
        getMessages(selectedGroup.id, messagesAmount).then(messagesAmountReceived => {
            this.setState({isInfiniteLoading: false});
            this.updateScroll(messagesAmountReceived);
        });
    }
 }

updateScroll(messagesAmount) {
    if (this.messageList) {
        this.messageList.scrollable.scrollTop = messageHeight * (messagesAmount - 1);
    }
}

<Infinite
    elementHeight={messageHeight}
    containerHeight={201}
    infiniteLoadBeginEdgeOffset={1}
    onInfiniteLoad={() => this.handleInfiniteLoad()}
    loadingSpinnerDelegate={isInfiniteLoading && <Loading/>}
    isInfiniteLoading={isInfiniteLoading}
    displayBottomUpwards
    ref={el => this.messageList = el}
>
    {this.showMessages()}
</Infinite>