Commit cb385d20 authored by Saturnino Abril's avatar Saturnino Abril Committed by Jesús Espino
Browse files

[MM-12328] Scroll to bottom the RHS thread whenever the state.draft.message is...

[MM-12328] Scroll to bottom the RHS thread whenever the state.draft.message is not empty on component update (#2037)

* scroll to bottom the RHS thread whenever the state.draft.message is not empty on component update

* update per feedback
parent e5bd6115
......@@ -197,6 +197,7 @@ export default class CreateComment extends React.PureComponent {
this.lastBlurAt = 0;
this.draftsForPost = {};
this.doInitialScrollToBottom = false;
}
UNSAFE_componentWillMount() { // eslint-disable-line camelcase
......@@ -208,6 +209,13 @@ export default class CreateComment extends React.PureComponent {
componentDidMount() {
this.focusTextbox();
document.addEventListener('keydown', this.focusTextboxIfNecessary);
// When draft.message is not empty, set doInitialScrollToBottom to true so that
// on next component update, the actual this.scrollToBottom() will be called.
// This is made so that the this.scrollToBottom() will be called only once.
if (this.props.draft.message !== '') {
this.doInitialScrollToBottom = true;
}
}
componentWillUnmount() {
......@@ -236,6 +244,11 @@ export default class CreateComment extends React.PureComponent {
if (prevProps.rootId !== this.props.rootId) {
this.focusTextbox();
}
if (this.doInitialScrollToBottom) {
this.scrollToBottom();
this.doInitialScrollToBottom = false;
}
}
focusTextboxIfNecessary = (e) => {
......
......@@ -736,4 +736,57 @@ describe('components/CreateComment', () => {
expect(instance.focusTextbox).toHaveBeenCalledTimes(1);
expect(instance.focusTextbox).toHaveBeenCalledWith(true);
});
test('should the RHS thread scroll to bottom one time after mount when props.draft.message is not empty', () => {
const draft = {
message: '',
uploadsInProgress: [],
fileInfos: [],
};
const wrapper = shallow(
<CreateComment {...baseProps}/>
);
wrapper.instance().scrollToBottom = jest.fn();
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(0);
expect(wrapper.instance().doInitialScrollToBottom).toEqual(true);
// should scroll to bottom on first component update
wrapper.setState({draft: {...draft, message: 'new message'}});
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(1);
expect(wrapper.instance().doInitialScrollToBottom).toEqual(false);
// but not after the first update
wrapper.setState({draft: {...draft, message: 'another message'}});
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(1);
expect(wrapper.instance().doInitialScrollToBottom).toEqual(false);
});
test('should the RHS thread scroll to bottom when state.draft.uploadsInProgress increases but not when it decreases', () => {
const draft = {
message: '',
uploadsInProgress: [],
fileInfos: [],
};
const wrapper = shallow(
<CreateComment
{...baseProps}
draft={draft}
/>
);
wrapper.instance().scrollToBottom = jest.fn();
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(0);
wrapper.setState({draft: {...draft, uploadsInProgress: [1]}});
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(1);
wrapper.setState({draft: {...draft, uploadsInProgress: [1, 2]}});
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(2);
wrapper.setState({draft: {...draft, uploadsInProgress: [2]}});
expect(wrapper.instance().scrollToBottom).toBeCalledTimes(2);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment