fix: focus border color issue

dineug · Dec 1, 2023 · 3bc7d73 · 3bc7d73
1 parent a96c8a9
commit 3bc7d73
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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/...ages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts b/...ages/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);