fix: update title on mounted

Author: huyjs9

src/components/EditorHeader/ControlPanel.jsx

@@ -76,7 +76,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({
@@ -728,7 +727,6 @@ export default function ControlPanel({
       rename: {
         function: () => {
           setModal(MODAL.RENAME);
-          setPrevTitle(title);
         },
       },
       delete_diagram: {
@@ -1309,10 +1307,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

@@ -6,7 +6,7 @@ import {
   Modal as SemiUIModal,
 } from "@douyinfe/semi-ui";
 import { DB, MODAL, STATUS } from "../../../data/constants";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { db } from "../../../data/db";
 import {
   useAreas,
@@ -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] = useStateCallback(title);
   const [importSource, setImportSource] = useState({
     src: "",
     overwrite: true,
@@ -78,6 +77,12 @@ export default function Modal({
   const [selectedDiagramId, setSelectedDiagramId] = useState(0);
   const [saveAsTitle, setSaveAsTitle] = useState(title);
 
+  useEffect(() => {
+    if (title !== uncontrolledTitle) {
+      setUncontrolledTitle(title);
+    }
+  }, [title]);
+
   const overwriteDiagram = () => {
     setTables(importData.tables);
     setRelationships(importData.relationships);
@@ -212,7 +217,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 +261,9 @@ export default function Modal({
           />
         );
       case MODAL.RENAME:
-        return <Rename title={title} setTitle={setTitle} />;
+        return (
+          <Rename title={uncontrolledTitle} setTitle={setUncontrolledTitle} />
+        );
       case MODAL.OPEN:
         return (
           <Open
@@ -339,7 +346,7 @@ export default function Modal({
         });
       }}
       onCancel={() => {
-        if (modal === MODAL.RENAME) setTitle(prevTitle);
+        if (modal === MODAL.RENAME) setUncontrolledTitle(title);
         setModal(MODAL.NONE);
       }}
       centered