From 3bc7d736f3af76057f7b2f7750f1d890cdc02f02 Mon Sep 17 00:00:00 2001
From: dineug <dineug2@gmail.com>
Date: Fri, 1 Dec 2023 14:01:47 +0900
Subject: [PATCH] fix: focus border color issue

---
 .../src/components/erd-editor/ErdEditor.styles.ts   |  6 +++++-
 .../src/components/erd-editor/ErdEditor.ts          | 13 +++++++++++--
 .../table/column/column-data-type/ColumnDataType.ts |  2 ++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/erd-editor/src/components/erd-editor/ErdEditor.styles.ts b/packages/erd-editor/src/components/erd-editor/ErdEditor.styles.ts
index 65146b1a..11017b2f 100644
--- a/packages/erd-editor/src/components/erd-editor/ErdEditor.styles.ts
+++ b/packages/erd-editor/src/components/erd-editor/ErdEditor.styles.ts
@@ -18,7 +18,11 @@ export const root = css`
     div[data-focus-border] {
       border-color: var(--placeholder) !important;
     }
-    div[data-focus-border-bottom],
+
+    div[data-focus-border-bottom] {
+      border-bottom-color: var(--placeholder) !important;
+    }
+
     input[data-focus-border-bottom] {
       border-bottom-color: var(--placeholder) !important;
     }
diff --git a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts
index 28681bbb..a9f436bc 100644
--- a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts
+++ b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts
@@ -103,12 +103,21 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
     keydown$.next(event);
   };
 
+  let currentFocus = false;
+  let timerId = -1;
+
   const handleFocus = () => {
+    currentFocus = true;
     state.isFocus = true;
   };
 
-  const handleFocusout = (event: FocusEvent) => {
-    state.isFocus = false;
+  const handleFocusout = () => {
+    currentFocus = false;
+
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(() => {
+      state.isFocus = currentFocus;
+    }, 10);
   };
 
   onMounted(() => {
diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts b/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts
index 7ddc2aa8..783b869c 100644
--- a/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts
+++ b/packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts
@@ -152,6 +152,8 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
   };
 
   const handleFocusout = (event: FocusEvent) => {
+    if (!props.edit) return;
+
     currentFocus = false;
 
     window.clearTimeout(timerId);