Error: The given range isn't in document

I noticed an annoying The given range isn't in document error during text editing in Chrome. I found one way to reproduce the problem in the Quill demo on your website so I guess this means this is a problem in Quill and not in my code.

Steps for Reproduction

1. Visit quilljs.com and switch to the third demo (The one where you can set a text color).
2. Click into the text area to focus the editor.
3. Select all text with Ctrl-A.
4. Remove selected text with Del. The document must be completely empty now.
5. Select a text color with the color picker in the toolbar.
6. Type multiple lines of text (Can’t be reproduced with just one line).
7. Select all content again with Ctrl-A.
8. Type new text.

Expected behavior:

The new text must replace the selected text.

Actual behavior:

The selected text is removed, the error message The given range isn't in document is thrown and the editor looses the focus.

Platforms: Chrome 63.0.3239.132 on Debian Linux 9.3

Version: 1.3.5

[HeGanjie]

I solve this issue by caching the modules props, instead of keep creating a new instance during each render.

Before:

<ReactQuill
        modules={{...}}
        ...
      />

After:

<ReactQuill
        modules={this.modules}
        ...
      />

[rw3iss]

Had the same problem and fixed it by not using the ‘value’ prop on the editor, but rather the ‘defaultValue’, which is apparently unmanaged to some extent. Using ‘react-quill’, fyi. Hope it helps.

 <ReactQuill 
            theme={'snow'}
            onChange={this.props.onChange}
            defaultValue={this.state.text}
            modules={ReactQuillEditor.modules}
            formats={ReactQuillEditor.formats}
            placeholder={'Write something...'}
        />