Merge pull request #157 from huyjs9/fix/update-title

Fix update title on first page load

Author: 1ilit

src/components/EditorHeader/ControlPanel.jsx

@@ -77,7 +77,6 @@ export default function ControlPanel({
 }) {
   const [modal, setModal] = useState(MODAL.NONE);
   const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE);
-  const [prevTitle, setPrevTitle] = useState(title);
   const [showEditName, setShowEditName] = useState(false);
   const [importDb, setImportDb] = useState("");
   const [exportData, setExportData] = useState({
@@ -730,7 +729,6 @@ export default function ControlPanel({
       rename: {
         function: () => {
           setModal(MODAL.RENAME);
-          setPrevTitle(title);
         },
       },
       delete_diagram: {
@@ -1316,10 +1314,8 @@ export default function ControlPanel({
         setExportData={setExportData}
         title={title}
         setTitle={setTitle}
-        setPrevTitle={setPrevTitle}
         setDiagramId={setDiagramId}
         setModal={setModal}
-        prevTitle={prevTitle}
         importDb={importDb}
       />
       <Sidesheet

src/components/EditorHeader/Modal/Modal.jsx

@@ -48,8 +48,6 @@ export default function Modal({
   setModal,
   title,
   setTitle,
-  prevTitle,
-  setPrevTitle,
   setDiagramId,
   exportData,
   setExportData,
@@ -65,6 +63,7 @@ export default function Modal({
   const { setTasks } = useTasks();
   const { setTransform } = useTransform();
   const { setUndoStack, setRedoStack } = useUndoRedo();
+  const [uncontrolledTitle, setUncontrolledTitle] = useState(title);
   const [importSource, setImportSource] = useState({
     src: "",
     overwrite: true,
@@ -212,7 +211,7 @@ export default function Modal({
         setModal(MODAL.NONE);
         return;
       case MODAL.RENAME:
-        setPrevTitle(title);
+        setTitle(uncontrolledTitle);
         setModal(MODAL.NONE);
         return;
       case MODAL.SAVEAS:
@@ -256,7 +255,9 @@ export default function Modal({
           />
         );
       case MODAL.RENAME:
-        return <Rename title={title} setTitle={setTitle} />;
+        return (
+          <Rename key={title} title={title} setTitle={setUncontrolledTitle} />
+        );
       case MODAL.OPEN:
         return (
           <Open
@@ -339,7 +340,7 @@ export default function Modal({
         });
       }}
       onCancel={() => {
-        if (modal === MODAL.RENAME) setTitle(prevTitle);
+        if (modal === MODAL.RENAME) setUncontrolledTitle(title);
         setModal(MODAL.NONE);
       }}
       centered

src/components/EditorHeader/Modal/Rename.jsx

@@ -7,7 +7,7 @@ export default function Rename({ title, setTitle }) {
   return (
     <Input
       placeholder={t("name")}
-      value={title}
+      defaultValue={title}
       onChange={(v) => setTitle(v)}
     />
   );