title: React-Quill - addRange(): The given range isn't in document
body: <p>I am trying to make a simple blog using React-Quill text editor. I want to get the value of the ReactQuill Editor and preview it on a different <strong>route</strong>. I've been trying to achieve this since quite a while now and each time I face the same issue, the quill editor loses focus after every key press and throws a warning in the console saying <strong>addRange(): The given range isn't in document.</strong></p>
  <p><em>I've observed one thing. When I just pass in the props to <strong>&lt; CreateBlog /&gt;</strong> without applying the route, it works perfectly fine. But as soon as I apply the routes to <strong>&lt; CreateBlog /&gt;</strong> component so that I can take the value from the editor and preview it on a different route, I start facing this issue.</em> I think that the react-router is probably responsible for such behavior but I'm unable to figure out the exact reason and its fix. Please help me. I've attached my code below for reference.</p>
  <p>App.js:</p>
  <pre><code>class App extends Component {
  
    constructor(){
      super()
  
      this.state = {
        title: '',
        text: ''
      }
  
      this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
      this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
    }
  
    handleBlogTextChange(value){
      this.setState({
        text: value
      })
      console.log(this.state.text)
    }
  
    handleBlogTitleChange(value){
      this.setState({
        title: value
      })
      console.log(this.state.title)
    }
  
    render(){
      return (
        &lt;BrowserRouter&gt;
          &lt;div class=&quot;App&quot;&gt;
            &lt;Switch&gt;
              &lt;Route path='/createBlog' component={() =&gt; &lt;CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /&gt; } /&gt;
              &lt;Route exact path='/preview' component={() =&gt; &lt;PreviewBlog title={this.state.title} text={this.state.text} /&gt;} /&gt;
              &lt;Redirect to='/createBlog' /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  <p>CreateBlog.js:</p>
  <pre><code>export default class CreateBlog extends Component {
  
      render() {
          return (
              &lt;&gt;
                     ----------
                          &lt;TextEditor text={this.props.text} handleBlogChange={this.props.handleBlogChange} /&gt;
                     ----------
              &lt;/&gt;
          )
      }
  }
  </code></pre>
  <p>TextEditor.js:</p>
  <pre><code>class TextEditor extends Component {
  
      componentDidMount(){
          const input = document.querySelector('input[data-link]')
          input.dataset.link = 'https://google.co.in'
      }
  
      modules={
          toolbar: [
              [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
              [{size: []}],
              ['bold', 'italic', 'underline', 'blockquote','code-block'],
              [{'list': 'ordered'}, {'list': 'bullet'}, 
               {'indent': '-1'}, {'indent': '+1'},{'align': []}],
              ['link', 'image', 'video'],
              ['clean']
            ],
      }
      
      render() {
          return (
              &lt;div className=&quot;editor&quot;&gt;
                  &lt;ReactQuill theme=&quot;snow&quot; placeholder=&quot;Enter story...&quot; modules={this.modules} value={this.props.text} onChange={this.props.handleBlogChange} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>