fix: dataType autocomplete

dineug · Nov 19, 2023 · 330c6d7 · 330c6d7
1 parent 71d0bdb
commit 330c6d7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/Column.ts b/packages/erd-editor/src/components/erd/canvas/table/column/Column.ts
@@ -229,6 +229,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
                       focus=${props.focusDataType}
                       edit=${props.editDataType}
                       .onBlur=${handleEditEnd}
+                      .onEditEnd=${handleEditEnd}
                       .onInput=${(event: InputEvent) => {
                         handleInput(event, FocusType.columnDataType);
                       }}

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
@@ -30,44 +30,43 @@ export type ColumnDataTypeProps = {
   value: string;
   onInput?: (event: InputEvent) => void;
   onBlur?: (event: FocusEvent) => void;
+  onEditEnd?: () => void;
 };
 
 export interface State {
   hints: DataTypeHint[];
   index: number;
-  holdFilter: boolean;
 }
 
-const hasArrowKey = arrayHas([
+const hasAutocompleteKey = arrayHas([
   'ArrowUp',
   'ArrowDown',
   'ArrowLeft',
   'ArrowRight',
+  'Tab',
+  'Enter',
 ]);
 
 const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
   const app = useAppContext(ctx);
   const state = observable<State>({
     hints: [],
     index: -1,
-    holdFilter: false,
   });
   const root = createRef<HTMLDivElement>();
   const { addUnsubscribe } = useUnmounted();
 
-  const setHints = () => {
-    if (state.holdFilter) return;
-
+  const setHints = (value: string) => {
     const { store } = app.value;
     const { settings } = store.state;
     const hints = DatabaseHintMap[settings.database] ?? [];
-    const value = props.value.trim();
+    const newValue = value.trim();
 
     state.index = -1;
-    state.hints = isEmpty(value)
+    state.hints = isEmpty(newValue)
       ? []
       : hints.filter(
-          hint => hint.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
+          hint => hint.name.toLowerCase().indexOf(newValue.toLowerCase()) !== -1
         );
   };
 
@@ -76,14 +75,14 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
     if (!hint) return;
 
     const { store } = app.value;
-    state.holdFilter = true;
     store.dispatch(
       changeColumnDataTypeAction({
         id: props.columnId,
         tableId: props.tableId,
         value: hint.name,
       })
     );
+    setHints('');
   };
 
   const handleArrowUp = (event: KeyboardEvent) => {
@@ -113,18 +112,35 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
     handleSelectHint(state.index);
   };
 
+  const handleTab = (event: KeyboardEvent) => {
+    if (state.index === -1) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    handleSelectHint(state.index);
+  };
+
+  const handleEnter = (event: KeyboardEvent) => {
+    if (state.index === -1) return;
+    event.stopPropagation();
+
+    handleSelectHint(state.index);
+    props.onEditEnd?.();
+  };
+
   const keyMap: Record<string, (event: KeyboardEvent) => void> = {
     ArrowUp: handleArrowUp,
     ArrowDown: handleArrowDown,
     ArrowLeft: handleArrowLeft,
     ArrowRight: handleArrowRight,
+    Tab: handleTab,
+    Enter: handleEnter,
   };
 
   const handleKeydown = (event: KeyboardEvent) => {
-    const { key } = event;
-    if (!hasArrowKey(key)) return;
+    if (!hasAutocompleteKey(event.key)) return;
 
-    keyMap[key]?.(event);
+    keyMap[event.key]?.(event);
   };
 
   let currentFocus = false;
@@ -142,16 +158,13 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
       const input = root.value?.querySelector('input');
       const isFocus = currentFocus && input && props.edit;
 
-      if (isFocus) {
-        lastCursorFocus(input);
-      } else {
-        props.onBlur?.(event);
-      }
+      isFocus ? lastCursorFocus(input) : props.onBlur?.(event);
     }, 1);
   };
 
   const handleInput = (event: InputEvent) => {
-    state.holdFilter = false;
+    const input = event.target as HTMLInputElement | null;
+    input && setHints(input.value);
     props.onInput?.(event);
   };
 
@@ -161,13 +174,12 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
 
     addUnsubscribe(
       watch(props).subscribe(propName => {
-        if (propName !== 'value') return;
-        setHints();
+        if (propName !== 'edit') return;
+        !props.edit && setHints('');
       }),
       watch(settings).subscribe(propName => {
         if (propName !== 'database') return;
-        state.holdFilter = false;
-        setHints();
+        setHints(props.value);
       })
     );
   });