React Quill 导致重新渲染<input>在 Quill 的编辑器之外

Question

I have the following React code in my component:

     const TextEditor = () => {
     const [richTextValue, setRichTextValue] = useState('');
     const [storyTitle, setStoryTitle] = useState('');
        
     const handleRichEditorOnChange = (content, delta, source, editor) => {
                setRichTextValue(editor.getHTML());
     }
        
     const handleTitleChange = event => {
                setStoryTitle(event.target.value);
     }
        
     return (
                    <>
                        <input type="text"
                               placeholder="Title"
                               value={storyTitle}
                               onChange={handleTitleChange}/>
                        <ReactQuill theme="snow"
                                    value={richTextValue}
                                    onChange={handleRichEditorOnChange}/>
                    </>
    )
}

If i type anything in <input> element, I lose focus after each letter typed because of Quill causing rerender somehow and get the error "Cannot flush updates when React is already rendering". However, if I remove ReactQuill element, input's behaviour is normal and I don't receive any error in console.

What is the reason behind this strange and unexpected behaviour and how can it be fixed?

Answer 1

Nevermind. I had:

if (richTextEditorRef.current) {
    richTextEditorRef.current.focus();
}

in code before adding input and now I figured out that it was forcing React to focus on Quill editor.