From 4485bf73a797c6449f0f2253990688af99431187 Mon Sep 17 00:00:00 2001
From: Huy Bui <huy03081999@gmail.com>
Date: Sun, 21 Jul 2024 17:22:23 +0700
Subject: [PATCH] fix: change approach to use key for reconciliation

---
 src/components/EditorHeader/Modal/Modal.jsx  | 10 ++--------
 src/components/EditorHeader/Modal/Rename.jsx |  2 +-
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/EditorHeader/Modal/Modal.jsx b/src/components/EditorHeader/Modal/Modal.jsx
index c296f01..fd20b78 100644
--- a/src/components/EditorHeader/Modal/Modal.jsx
+++ b/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 { useEffect, useState } from "react";
+import { useState } from "react";
 import { db } from "../../../data/db";
 import {
   useAreas,
@@ -77,12 +77,6 @@ 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);
@@ -262,7 +256,7 @@ export default function Modal({
         );
       case MODAL.RENAME:
         return (
-          <Rename title={uncontrolledTitle} setTitle={setUncontrolledTitle} />
+          <Rename key={title} title={title} setTitle={setUncontrolledTitle} />
         );
       case MODAL.OPEN:
         return (
diff --git a/src/components/EditorHeader/Modal/Rename.jsx b/src/components/EditorHeader/Modal/Rename.jsx
index d876746..522d5e6 100644
--- a/src/components/EditorHeader/Modal/Rename.jsx
+++ b/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)}
     />
   );