From 687471c19e3bf0e22277e8bc90223e089a265e74 Mon Sep 17 00:00:00 2001
From: arookieofc <arookieofc@gmail.com>
Date: Mon, 9 Nov 2026 17:58:29 +0800
Subject: [PATCH] fix(database): table editor focus when the tab opens targets
 the editor host (#2307) (#2318)

The editor area focuses its own [data-editor-focus] host when a table tab
opens; dbTableEditorFocus only set when focus landed inside
[data-db-table-editor], so Go to Column / Submit / Revert stayed disabled
until a cell was clicked. Treat host focus that wraps a table editor as
table-editor focus too.
---
 src/features/database/table-editor.test.tsx | 25 +++++++++++++++++++++
 src/features/database/tableEditorFocus.ts   |  6 ++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/features/database/table-editor.test.tsx b/src/features/database/table-editor.test.tsx
index 32687106a..2980a62c5 100644
--- a/src/features/database/table-editor.test.tsx
+++ b/src/features/database/table-editor.test.tsx
@@ -125,4 +125,29 @@ describe("table editor capabilities", () => {
       uninstall();
     }
   });
+
+  it("counts the editor-area host focusing the tab as table-editor focus (#2307)", async () => {
+    backend.driver = "postgres";
+    const uninstall = installTableEditorFocus();
+    try {
+      let root!: HTMLElement;
+      await act(async () => {
+        const r = render(<TableEditor input={tableInput("source", "public", "users")} />);
+        root = r.container;
+      });
+      // Mimic EditorArea wrapping the tab in its focusable host, then focusing the host on open.
+      const host = root.closest("div")!;
+      host.setAttribute("data-editor-focus", "");
+      host.tabIndex = -1;
+      act(() => host.focus());
+      expect(getContext()).toMatchObject({ dbTableEditorFocus: true, dbTableEditorChanges: false });
+      // A later focus inside a text field still turns it off.
+      const input = document.createElement("input");
+      root.querySelector("[data-db-table-editor]")!.appendChild(input);
+      act(() => input.focus());
+      expect(getContext().dbTableEditorFocus).toBe(false);
+    } finally {
+      uninstall();
+    }
+  });
 });
diff --git a/src/features/database/tableEditorFocus.ts b/src/features/database/tableEditorFocus.ts
index 22bdb5bf5..4453d2f92 100644
--- a/src/features/database/tableEditorFocus.ts
+++ b/src/features/database/tableEditorFocus.ts
@@ -23,7 +23,11 @@ function update() {
 
 function onFocusIn(event: FocusEvent) {
   const target = event.target instanceof Element ? event.target : null;
-  const root = target?.closest("[data-db-table-editor]");
+  // The editor area focuses its host `[data-editor-focus]` when the tab opens —
+  // treat that as focus inside a table editor so ⌘F12 / ⌘↩ work right away.
+  const root =
+    target?.closest("[data-db-table-editor]") ??
+    (target?.hasAttribute("data-editor-focus") ? target.querySelector("[data-db-table-editor]") : null);
   active = (root && !isTextField(target!) && handles.get(root)) || null;
   update();
 }