chat doesnt scroll upon return to homepage

[aveni]

After tutorial or an FFA match, when you return to hompage / Q, the chat doesn't scroll to bottom

[aveni]

@a-lchen I think this is actually a bit tricky.. i cant call this.scrollChat() in the callback to the homepage because its searching for a document element that isnt there yet (the chat hasnt been rendered). I wonder if it would be better to make Chat a component and then call scroll anytime the component is mounted?

[a-lchen]

Can't we call it on render?

[stevenhao]

I suggest using refs (read discussion at https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components if you want to manage it from the parent component, which shouldn't be necessary), instead of using document.getElementByID to access the message-feed element.

I think you should could call scrollChat whenever the Chat's messages update. This can be implemented by making Chat a class component, and using

• componentShouldUpdate, should return, given nextProps and nextState, whether it should re-render. You can do a deep-comparison of props.messages here.
• componentDidUpdate, called after props / state changes trigger an update (the dom elements would exist at this point). This is where you would call scrollChat. Optionally, you can use
• getSnapshotBeforeUpdate, where you can check things like scrollTop, to see which chat message is currently visible, in case you want to auto-scroll to keep it in view (instead of scrolling all the way to the bottom)

[a-lchen]

That sounds promising.