How to stop DraftJS cursor jumping to beginning of text?

Code involved using DraftJS and Meteor Js application Task - Make a live preview where text from DraftJS will get saved to DB and from DB it get displayed on another component.

But problem is once data comes from DB and I try to edit DraftJS cursor moved to the beginning.

Code is

import {Editor, EditorState, ContentState} from 'draft-js';
import React, { Component } from 'react';
import { TestDB } from '../api/yaml-component.js';
import { createContainer } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';

class EditorComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    	editorState : EditorState.createEmpty(),
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log('Receiving Props');
    if (!nextProps) return;
    console.log(nextProps);
    let j = nextProps.testDB[0];
    let c = ContentState.createFromText(j.text);
    this.setState({
      editorState: EditorState.createWithContent(c),
    })
  }

  insertToDB(finalComponentStructure) {
    if (!finalComponentStructure) return;
    finalComponentStructure.author = 'Sandeep3005';
    Meteor.call('testDB.insert', finalComponentStructure);
  }


  _handleChange(editorState) {
    console.log('Inside handle change');
    let contentState = editorState.getCurrentContent();
    this.insertToDB({text: contentState.getPlainText()});
    this.setState({editorState});
  }

  render() {
    return (
      <div>
        <Editor
          placeholder="Insert YAML Here"
          editorState={this.state.editorState}
          onChange={this._handleChange.bind(this)}
        />
      </div>
    );
  }
}

    
    EditorComponent.propTypes = {
     staff: PropTypes.array.isRequired,
    };
    
    export default createContainer(() => {
      return {
        staff: Staff.find({}).fetch(),
      };
    }, EditorComponent);

Any helpful comment in right direction will be useful

Also find out that issue occurs if we right below code in handleChange method

let { editorState : olderState} = this.state; if(olderState == editorState ) return; this.setState({editorState Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? Using DraftJs v 0.10

[sandeepreddy19]

  const newState = EditorState.createEmpty()
  this.setState({
          editorState: EditorState.moveFocusToEnd(newState)
   })

This worked for me…

[drock512]

The root cause of my issue appears to have stemmed from how I was resetting the DraftJs content. I’m using DraftJS for a chat application. The first chat message was fine and didn’t exhibit the cursor jumping to the beginning but there was a high probability that any subsequent messages would have the cursor jump.

Before, I would reset the DraftJS content with the following:

const newEditorState = EditorState.createEmpty();
draftJsField = EditorState.moveFocusToEnd(newEditorState);

What fixed it for me was moving to the following:

draftJsField = EditorState.moveFocusToEnd(EditorState.push(editorState, ContentState.createFromText(''), 'remove-range'));

I found through some searching that if you need to clear the DraftJs content, it is recommended to perform a ‘createFromText’ rather than a ‘createEmpty’. The ‘createEmpty’ should only be used on initialization.

So my initial chat message uses the ‘createEmpty’ but all subsequent messages use the ‘createFromText’ to clear the content and reset the focus. Hope this helps.