react quill lose focus onChange - reactjs

Question

hello everyone i dont know why i lose my focus, i have seen it could be linked with rerendering but i have no idea what to do
hello everyone i dont know why i lose my focus, i have seen it could be linked with rerendering but i have no idea what to do
1) i tried to useRef but it always focus at the begining of the textarea
2) i used React Quill library so as i know its common mistake
3) please help
import React from "react";
import Editor from "./Editor";
import { initialState } from "../redux/reducer/field";
import { connect } from "react-redux";
import ReactQuill, { Quill } from "react-quill";
import { getValue } from "#testing-library/user-event/dist/utils";
import { useRef, useEffect } from "react";
import { useState } from "react";
import "quill-mention";
import "react-quill/dist/quill.snow.css";
const EditorFirstComp = ({
setContent,
content,
fieldList,
setDataFromEditor,
}) => {
const atValues = fieldList.map(
(field) => [{ id: field.key, value: field.label }][0]
);
const hashValues = [
{ id: 3, value: "Fredrik Sundqvist 2" },
{ id: 4, value: "Patrik Sjölin 2" },
];
const mentionModuleConfig = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["#", "#"],
source: function (searchTerm, renderList, mentionChar) {
let values;
if (mentionChar === "#") {
values = atValues;
} else {
values = hashValues;
}
if (searchTerm.length === 0) {
renderList(values, searchTerm);
} else {
const matches = [];
for (let i = 0; i < values.length; i++)
if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()))
matches.push(values[i]);
renderList(matches, searchTerm);
}
},
};
const modules = {
mention: mentionModuleConfig,
};
const Editor = ({ setContent, setDataFromEditor, content, modules }) => {
const [local,setLocal]=useState(content)
const handleChange = (e) => {
setContent(e);
};
// const elemRef=useRef(null)
// useEffect(()=>{
// elemRef.current.focus()
// },[content])
return (
<form>
<ReactQuill
theme="snow"
defaultValue={content}
onChange={(e) => handleChange(e)}
modules={modules}
/>
</form>
);
};
return (
<Editor
setContent={setContent}
content={content}
modules={modules}
></Editor>
);
};
const mapStateToProps = (state) => ({
fieldList: state.field,
});
const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(EditorFirstComp);

Answer 1

Because you creating Editor component inside another component, every render react will create new Editor component and therefore there is no longer old editor which have focus in. Declare Editor component outside of EditorFirstComp or wrap declaration of Editor inside of useMemo, to memoize this instance.