diff --git a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/TableDetailDrawer/TableDetailDrawer.tsx b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/TableDetailDrawer/TableDetailDrawer.tsx
index ce39fbff16..b2cf4480fa 100644
--- a/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/TableDetailDrawer/TableDetailDrawer.tsx
+++ b/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/TableDetailDrawer/TableDetailDrawer.tsx
@@ -75,12 +75,30 @@ export const TableDetailDrawerRoot: FC
= ({ children }) => {
}
}
+ // Also stop propagation on click events to prevent ReactFlow from
+ // triggering fitView when clicking outside the drawer to close it
+ const handleClickOutsideClick = (event: MouseEvent) => {
+ if (!(event.target instanceof Element)) {
+ return
+ }
+
+ if (
+ drawerRef.current &&
+ !drawerRef.current.contains(event.target) &&
+ open
+ ) {
+ event.stopPropagation()
+ }
+ }
+
if (open) {
document.addEventListener('mousedown', handleClickOutside, true)
+ document.addEventListener('click', handleClickOutsideClick, true)
}
return () => {
document.removeEventListener('mousedown', handleClickOutside, true)
+ document.removeEventListener('click', handleClickOutsideClick, true)
}
}, [open, handleClose])
diff --git a/frontend/packages/erd-core/src/features/erd/hooks/useTableSelection/useTableSelection.ts b/frontend/packages/erd-core/src/features/erd/hooks/useTableSelection/useTableSelection.ts
index e64d6c271c..0a9a6a06df 100644
--- a/frontend/packages/erd-core/src/features/erd/hooks/useTableSelection/useTableSelection.ts
+++ b/frontend/packages/erd-core/src/features/erd/hooks/useTableSelection/useTableSelection.ts
@@ -7,6 +7,7 @@ import { highlightNodesAndEdges } from '../../utils'
type SelectTableParams = {
tableId: string
displayArea: DisplayArea
+ skipFitView?: boolean
}
export const useTableSelection = () => {
@@ -16,7 +17,11 @@ export const useTableSelection = () => {
useCustomReactflow()
const selectTable = useCallback(
- async ({ tableId, displayArea }: SelectTableParams) => {
+ async ({
+ tableId,
+ displayArea,
+ skipFitView = false,
+ }: SelectTableParams) => {
setActiveTableName(tableId)
const { nodes, edges } = highlightNodesAndEdges(getNodes(), getEdges(), {
@@ -26,7 +31,7 @@ export const useTableSelection = () => {
setNodes(nodes)
setEdges(edges)
- if (displayArea === 'main') {
+ if (displayArea === 'main' && !skipFitView) {
await fitView({
maxZoom: 1,
duration: 300,
diff --git a/frontend/packages/erd-core/src/stores/userEditing/Provider.tsx b/frontend/packages/erd-core/src/stores/userEditing/Provider.tsx
index 1cb6af63e1..6f02566bd9 100644
--- a/frontend/packages/erd-core/src/stores/userEditing/Provider.tsx
+++ b/frontend/packages/erd-core/src/stores/userEditing/Provider.tsx
@@ -47,7 +47,7 @@ type Props = PropsWithChildren & UserEditingProviderValue
export const UserEditingProvider: FC = ({
children,
showDiff: initialShowDiff = false,
- defaultShowMode = 'TABLE_NAME',
+ defaultShowMode = 'KEY_ONLY',
}) => {
const [activeTableName, _setActiveTableName] = useQueryState(
'active',