diff --git a/src/components/EditorSidePanel/TablesTab/SearchBar.jsx b/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
index 4ef926b..7f0e0d7 100644
--- a/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
+++ b/src/components/EditorSidePanel/TablesTab/SearchBar.jsx
@@ -2,18 +2,19 @@ import { useState } from "react";
 import { useSelect, useTables } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
+import { ObjectType } from "../../../data/constants";
 
 export default function SearchBar() {
   const { tables } = useTables();
   const { setSelectedElement } = useSelect();
   const [searchText, setSearchText] = useState("");
   const [filteredResult, setFilteredResult] = useState(
-    tables.map((t) => t.name)
+    tables.map((t) => t.name),
   );
 
   const handleStringSearch = (value) => {
     setFilteredResult(
-      tables.map((t) => t.name).filter((i) => i.includes(value))
+      tables.map((t) => t.name).filter((i) => i.includes(value)),
     );
   };
 
@@ -33,6 +34,7 @@ export default function SearchBar() {
           ...prev,
           id: id,
           open: true,
+          element: ObjectType.TABLE,
         }));
         document
           .getElementById(`scroll_table_${id}`)
diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index aa56c37..d178455 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -1,6 +1,7 @@
 import { Collapse, Row, Col, Button } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
 import { useSelect, useTables } from "../../../hooks";
+import { ObjectType } from "../../../data/constants";
 import SearchBar from "./SearchBar";
 import Empty from "../Empty";
 import TableInfo from "./TableInfo";
@@ -25,12 +26,17 @@ export default function TablesTab() {
         <Empty title="No tables" text="Start building your diagram!" />
       ) : (
         <Collapse
-          activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
+          activeKey={
+            selectedElement.open && selectedElement.element === ObjectType.TABLE
+              ? `${selectedElement.id}`
+              : ""
+          }
           onChange={(k) =>
             setSelectedElement((prev) => ({
               ...prev,
-              id: parseInt(k),
               open: true,
+              id: parseInt(k),
+              element: ObjectType.TABLE,
             }))
           }
           accordion
diff --git a/src/components/EditorSidePanel/TypesTab/SearchBar.jsx b/src/components/EditorSidePanel/TypesTab/SearchBar.jsx
index 198267f..c4db87a 100644
--- a/src/components/EditorSidePanel/TypesTab/SearchBar.jsx
+++ b/src/components/EditorSidePanel/TypesTab/SearchBar.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 import { useSelect, useTypes } from "../../../hooks";
+import { ObjectType } from "../../../data/constants";
 
 export default function Searchbar() {
   const { types } = useTypes();
@@ -32,8 +33,9 @@ export default function Searchbar() {
         const i = types.findIndex((t) => t.name === v);
         setSelectedElement((prev) => ({
           ...prev,
-          id: parseInt(i),
+          id: i,
           open: true,
+          element: ObjectType.TYPE,
         }));
         document
           .getElementById(`scroll_type_${i}`)
diff --git a/src/components/EditorSidePanel/TypesTab/TypesTab.jsx b/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
index c469527..ac6a9a2 100644
--- a/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
+++ b/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
@@ -1,8 +1,9 @@
 import { Collapse, Row, Col, Button, Popover } from "@douyinfe/semi-ui";
 import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
+import { useSelect, useTypes } from "../../../hooks";
+import { ObjectType } from "../../../data/constants";
 import Searchbar from "./SearchBar";
 import Empty from "../Empty";
-import { useSelect, useTypes } from "../../../hooks";
 import TypeInfo from "./TypeInfo";
 
 export default function TypesTab() {
@@ -54,12 +55,17 @@ export default function TypesTab() {
         <Empty title="No types" text="Make your own custom data types" />
       ) : (
         <Collapse
-          activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
+          activeKey={
+            selectedElement.open && selectedElement.element === ObjectType.TYPE
+              ? `${selectedElement.id}`
+              : ""
+          }
           onChange={(id) =>
             setSelectedElement((prev) => ({
               ...prev,
-              id: parseInt(id),
               open: true,
+              id: parseInt(id),
+              element: ObjectType.TYPE,
             }))
           }
           accordion