From ce22d6a0462e5b900fe27dd657daad2d9fb168ed Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 26 May 2026 12:30:12 +0800
Subject: [PATCH] fix: focus new structure column input

---
 .../structure/TableStructureEditor.vue        | 21 ++++++++++++++++---
 .../tableStructureEditorPresentation.test.ts  | 10 +++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/components/structure/TableStructureEditor.vue b/apps/desktop/src/components/structure/TableStructureEditor.vue
index c049c6e5c6..081de755bc 100644
--- a/apps/desktop/src/components/structure/TableStructureEditor.vue
+++ b/apps/desktop/src/components/structure/TableStructureEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { uuid } from "@/lib/utils";
 import { useI18n } from "vue-i18n";
 import { Button } from "@/components/ui/button";
@@ -52,6 +52,7 @@ const { t } = useI18n();
 const { isDark } = useTheme();
 const store = useConnectionStore();
 const { toast } = useToast();
+const rootRef = ref<HTMLElement>();
 
 const sqlHighlighter = ref<SqlHighlighter>();
 onMounted(async () => {
@@ -225,8 +226,9 @@ async function loadStructure(silent = false) {
   }
 }
 
-function addColumn() {
+async function addColumn() {
   if (!structureCapabilities.value.addColumn) return;
+  activeTab.value = "columns";
   columns.value.push({
     id: `new:${uuid()}`,
     name: "",
@@ -237,6 +239,13 @@ function addColumn() {
     isPrimaryKey: false,
     markedForDrop: false,
   });
+  await nextTick();
+  const newRows = rootRef.value?.querySelectorAll<HTMLElement>('[data-new-column-row="true"]');
+  const row = newRows?.[newRows.length - 1];
+  const input = row?.querySelector<HTMLInputElement>("[data-column-name-input]");
+  row?.scrollIntoView({ block: "nearest" });
+  input?.focus();
+  input?.select();
 }
 
 function removeNewColumn(column: EditableStructureColumn) {
@@ -404,7 +413,11 @@ watch(
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 flex-col gap-2 overflow-hidden p-3 text-[11px]" data-structure-density="compact">
+  <div
+    ref="rootRef"
+    class="flex h-full min-h-0 flex-col gap-2 overflow-hidden p-3 text-[11px]"
+    data-structure-density="compact"
+  >
     <div class="flex shrink-0 items-center gap-2 rounded-md border bg-muted/20 px-2.5 py-1.5 text-[11px]">
       <Database class="h-3.5 w-3.5 text-muted-foreground" />
       <span class="min-w-0 flex-1 truncate font-medium">{{ targetLabel || t("editor.noDatabase") }}</span>
@@ -504,6 +517,7 @@ watch(
                   v-for="(column, index) in columns"
                   :key="column.id"
                   :class="column.markedForDrop ? 'bg-destructive/5 opacity-60' : ''"
+                  :data-new-column-row="!column.original ? 'true' : undefined"
                 >
                   <td class="border-b border-r px-1.5 py-1 text-muted-foreground">
                     <div class="flex items-center gap-1">
@@ -516,6 +530,7 @@ watch(
                       v-model="column.name"
                       class="h-6 min-w-28 text-[11px]"
                       :disabled="isColumnNameDisabled(column)"
+                      data-column-name-input
                     />
                   </td>
                   <td class="border-b border-r px-1.5 py-1">
diff --git a/packages/app-tests/tableStructureEditorPresentation.test.ts b/packages/app-tests/tableStructureEditorPresentation.test.ts
index f977b7ec71..55947217bf 100644
--- a/packages/app-tests/tableStructureEditorPresentation.test.ts
+++ b/packages/app-tests/tableStructureEditorPresentation.test.ts
@@ -70,3 +70,13 @@ test("structure editor keeps the table body vertically scrollable", () => {
   assert.match(source, /class="flex h-full min-h-0 flex-col"/);
   assert.match(source, /<TabsContent value="columns" class="m-0 min-h-0 flex-1 overflow-auto p-0">/);
 });
+
+test("new column input is focused after adding a field", () => {
+  assert.match(source, /import \{ computed, nextTick, onMounted, ref, watch \} from "vue"/);
+  assert.match(source, /async function addColumn/);
+  assert.match(source, /activeTab\.value = "columns"/);
+  assert.match(source, /await nextTick\(\)/);
+  assert.match(source, /data-new-column-row="true"/);
+  assert.match(source, /data-column-name-input/);
+  assert.match(source, /input\?\.focus\(\)/);
+});