fix: exit table edit on area click (#945)

* fix: exit table edit on area click

* fix

src/hooks/use-update-table-field.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { useChartDB } from './use-chartdb';
 import { useDebounce } from './use-debounce-v2';
 import type { DBField, DBTable } from '@/lib/domain';
@@ -75,12 +75,20 @@ export const useUpdateTableField = (
     const [localNullable, setLocalNullable] = useState(field.nullable);
     const [localPrimaryKey, setLocalPrimaryKey] = useState(field.primaryKey);
 
+    const lastFieldNameRef = useRef<string>(field.name);
+
+    useEffect(() => {
+        if (localFieldName === lastFieldNameRef.current) {
+            lastFieldNameRef.current = field.name;
+            setLocalFieldName(field.name);
+        }
+    }, [field.name, localFieldName]);
+
     // Update local state when field properties change externally
     useEffect(() => {
-        setLocalFieldName(field.name);
         setLocalNullable(field.nullable);
         setLocalPrimaryKey(field.primaryKey);
-    }, [field.name, field.nullable, field.primaryKey]);
+    }, [field.nullable, field.primaryKey]);
 
     // Use custom updateField if provided, otherwise use the chartDB one
     const updateField = useMemo(

src/pages/editor-page/canvas/area-node/area-node.tsx

@@ -16,6 +16,7 @@ import { Check, GripVertical, Pencil } from 'lucide-react';
 import { Button } from '@/components/button/button';
 import { useLayout } from '@/hooks/use-layout';
 import { AreaNodeContextMenu } from './area-node-context-menu';
+import { useCanvas } from '@/hooks/use-canvas';
 
 export type AreaNodeType = Node<
     {
@@ -57,6 +58,8 @@ export const AreaNode: React.FC<NodeProps<AreaNodeType>> = React.memo(
         useKeyPressEvent('Enter', editAreaName);
         useKeyPressEvent('Escape', abortEdit);
 
+        const { setEditTableModeTable } = useCanvas();
+
         const enterEditMode = (e: React.MouseEvent) => {
             e.stopPropagation();
             setEditMode(true);
@@ -77,6 +80,7 @@ export const AreaNode: React.FC<NodeProps<AreaNodeType>> = React.memo(
                         borderColor: selected ? undefined : area.color,
                     }}
                     onClick={(e) => {
+                        setEditTableModeTable(null);
                         if (e.detail === 2) {
                             openAreaInEditor();
                         }

src/pages/editor-page/canvas/canvas.tsx

@@ -200,6 +200,9 @@ const areaToAreaNode = (
         width: area.width,
         height: area.height,
         zIndex: -10,
+        style: {
+            zIndex: -10,
+        },
         hidden: !hasVisibleTable || filterLoading,
     };
 };