getSelection() only works after setSelection()

It turned out that the issue was that the editor was losing focus when clicking on a custom button. This can be resolved by adding a custom format tied to a button or by calling quill.focus before quill.getSelection. A demo can be seen here

I want to set cursor to specific position but not working in my code here is the sample code I wrote any body know please update

import React, {Component} from ‘react’; import ReactQuill from ‘react-quill’ import “react-quill/dist/quill.snow.css”; import ‘./App.css’;

class App extends Component{ constructor(props) { super(props); this.state = { editorHtml: “testing” }; this.handleChange = this.handleChange.bind(this); this.handleChangeSelection = this.handleChangeSelection.bind(this);

this.reactQuillRef = null

}

handleChange(content, delta, source, editor) { console.log(content); console.log(delta); console.log(source); console.log(editor.getSelection()); //console.log(“IBM”+editor.getHTML()); // HTML/rich text //alert(event); //this.setState({ editorHtml: editor.getHt }); }

handleChangeSelection(e) { console.log(e); }

moveCursor = () => { this.reactQuillRef.focus();

console.log(this.reactQuillRef.getEditorSelection().index);
//console.log(this.reactQuillRef);

var range = this.reactQuillRef.getEditorSelection().index;

}

render(){ return ( <div className="App">

    <div className="text-editor">        
    <ReactQuill         
      ref={(el) => { this.reactQuillRef = el }}
      autoFocus="true"         
      onChange={this.handleChange}
      onChangeSelection={this.handleChangeSelection}
      value={this.state.editorHtml}             
      theme={"snow"} // pass false to use minimal theme
    />
    </div>
    <div className="row"><button onClick={() => this.moveCursor()}>Move Curser</button></div>
  </div>
);

} }

export default App;