diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx index 319d1decc..3a3dddaed 100644 --- a/src/components/Popups/ReplyField/ReplyField.tsx +++ b/src/components/Popups/ReplyField/ReplyField.tsx @@ -45,33 +45,16 @@ export default class ReplyField extends React.Component { value: '', }; - editorRef: React.MutableRefObject = React.createRef(); - constructor(props: Props) { super(props); - const { value, cursorPosition } = props; - const contentState = ContentState.createFromText(value as string); - let prevEditorState = withMentionDecorator(EditorState.createWithContent(contentState)); - let selectionState = prevEditorState.getSelection(); - - selectionState = selectionState.merge({ - anchorOffset: cursorPosition, - focusOffset: cursorPosition, - }) as SelectionState; - prevEditorState = EditorState.forceSelection(prevEditorState, selectionState); - this.state = { activeItemIndex: 0, - editorState: prevEditorState, + editorState: this.restoreEditor(), popupReference: null, }; } - componentDidMount(): void { - this.focusEditor(); - } - componentWillUnmount(): void { this.saveCursorPosition(); } @@ -140,13 +123,6 @@ export default class ReplyField extends React.Component { this.setState({ popupReference: activeMention ? this.getVirtualElement(activeMention) : null }); }; - focusEditor = (): void => { - const { current: editor } = this.editorRef; - if (editor) { - editor.focus(); - } - }; - saveCursorPosition = (): void => { const { setCursorPosition } = this.props; const { editorState } = this.state; @@ -230,6 +206,22 @@ export default class ReplyField extends React.Component { this.setPopupListActiveItem(activeItemIndex === length - 1 ? 0 : activeItemIndex + 1); }; + restoreEditor(): EditorState { + const { cursorPosition: prevCursorPosition, value } = this.props; + const contentState = ContentState.createFromText(value as string); + const prevEditorState = withMentionDecorator(EditorState.createWithContent(contentState)); + const cursorPosition = value ? prevCursorPosition : 0; + + return EditorState.forceSelection( + prevEditorState, + prevEditorState.getSelection().merge({ + anchorOffset: cursorPosition, + focusOffset: cursorPosition, + hasFocus: true, + }) as SelectionState, + ); + } + render(): JSX.Element { const { className, isDisabled, itemRowAs, placeholder, ...rest } = this.props; const { activeItemIndex, editorState, popupReference } = this.state; @@ -238,7 +230,6 @@ export default class ReplyField extends React.Component {
{ const getWrapper = (props = {}): ShallowWrapper => shallow(); + describe('restoreEditor()', () => { + test('should restore value and cursor position', () => { + const wrapper = getWrapper({ cursorPosition: 1, value: 'test' }); + + const editorState = wrapper.instance().restoreEditor(); + + expect(editorState.getCurrentContent().getPlainText()).toEqual('test'); + expect(editorState.getSelection().getFocusOffset()).toEqual(1); + }); + + test('should reset cursor position if value is empty', () => { + const wrapper = getWrapper({ cursorPosition: 1 }); + const editorState = wrapper.instance().restoreEditor(); + + expect(editorState.getSelection().getFocusOffset()).toEqual(0); + }); + }); + describe('render()', () => { test('should render the editor with right props', () => { const wrapper = getWrapper(); @@ -238,22 +256,6 @@ describe('components/Popups/ReplyField', () => { }); }); - describe('focusEditor()', () => { - test('should call editor ref focus', () => { - const wrapper = getWrapper(); - const instance = wrapper.instance(); - - const editorRef = ({ - focus: jest.fn(), - } as unknown) as Editor; - - instance.editorRef = { current: editorRef }; - instance.focusEditor(); - - expect(editorRef.focus).toBeCalled(); - }); - }); - describe('saveCursorPosition()', () => { test('should call setCursorPosition with cursor position', () => { const wrapper = getWrapper();