Move focus into a new settings draft in the same commit

[nadaverell]

Summary

Copying settings from another cluster, loading previous global settings, or choosing auto-discovery now moves focus into the new form immediately, instead of one animation frame later. This fixes the settings e2e test that flaked: "copy into an unconfigured cluster saves edited headers without an intermediate write".

What happened

Each of those three actions remounts the integration form, which holds the header edits, and then focuses the form's first field, the backend URL. The focus ran in requestAnimationFrame, so there was a gap between the remount and the focus move.

Playwright's fill() has two steps: it focuses the target field, then types into whatever has focus. Under load, the delayed frame could fire between those steps. In the test that meant:

1. The test selects a copy source; the form remounts with the source's two headers.
2. fill('new-tenant') focuses the X-Scope-OrgID value field.
3. The deferred frame moves focus to the URL field.
4. "new-tenant" is typed into the URL field, then overwritten by the test's next fill() of the URL.
5. Save sends the copy with headers: []. The header was never edited, so the form has no header operations.

That is the exact failure the test showed. Holding the app's animation-frame callbacks and releasing them when the header field gains focus reproduces it every time.

A real user is unlikely to type within one frame. But on a loaded machine, keystrokes typed right after choosing a source could go to the closed picker or the wrong field.

What changed

• LocalConnectionSettings moves focus in a layout effect, which runs during the commit that mounts the new form, before any later input event is handled. The three call sites hand it a focus function instead of scheduling a frame.
• The test now checks that focus has reached the URL field before the next frame after selecting a copy source. That check fails on the old code and passes now.

The two other requestAnimationFrame focus calls in Settings are unchanged. They move focus to a heading after navigation, and nothing types into the form after them.

Testing

• Deterministic repro (held animation frames, temporary): fails 3/3 before the change, passes 3/3 after.
• New focus check: fails 2/2 on the old code, passes on the new.
• npm run test:e2e:settings: 135/135, at load average ~200. Settings vitest 38/38. make tsc clean.
• No visual change.

---

Note

Low Risk
UI-only focus timing in settings; no auth, API, or persistence changes beyond fixing mis-targeted typing after draft remounts.

Overview
Fixes a focus timing race when local connection settings remount the draft form after copy from another cluster, load previous global settings, or switch to auto-discovery.

LocalConnectionSettings no longer schedules the first-field focus with requestAnimationFrame. It stores a focus callback in focusAfterDraft and runs it in a useLayoutEffect, so focus moves in the same commit as the new form—before later input events can steal keystrokes.

The flaky e2e "copy into an unconfigured cluster saves edited headers without an intermediate write" now asserts that Metrics backend URL is focused immediately after picking a copy source (before the next frame), matching the new behavior.

^{Reviewed by Cursor Bugbot for commit 347f132. Bugbot is set up for automated code reviews on this repo. Configure here.}

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Focus new settings drafts before the next animation frame

🐞 Bug fix 🧪 Tests 🕐 10-20 Minutes

AI Description

• Move focus during draft-form commits for copied, previous, and auto-discovery settings.
• Prevent delayed focus from redirecting header edits into the backend URL field.
• Assert focus reaches the copied form before the next frame in the settings e2e test.

Diagram

graph TD
  COPY["Copy source"] --> PENDING["Pending focus"] --> COMMIT["Draft commit"] --> EFFECT["Layout effect"] --> TARGET(["First control"])
  PREVIOUS["Load previous"] --> PENDING
  AUTO["Auto-discovery"] --> PENDING

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Focus through a remounted-control callback ref

• ➕ Ties focus directly to the new control's attachment.
• ➖ Requires ref plumbing across form variants and the cost source picker.

Recommendation: Keep the layout-effect approach. It handles all three draft transitions in one place, retains their existing first-control selection, and removes the animation-frame gap without changing form components.

Files changed (2) +20 / -5

Bug fix (1) +12 / -4

LocalConnectionSettings.tsxFocus remounted settings drafts in a layout effect +12/-4

Focus remounted settings drafts in a layout effect

• Copying cluster settings, loading previous global settings, and choosing auto-discovery now register a pending focus callback. A layout effect consumes it when the new draft commits, replacing the three delayed animation-frame focus calls.

web/src/components/settings/LocalConnectionSettings.tsx

Tests (1) +8 / -1

settings-connections.spec.tsAssert copied-form focus before the next frame +8/-1

Assert copied-form focus before the next frame

• The copy-and-edit e2e test now checks that selecting a source focuses the Metrics backend URL during the immediate update, before filling a header. It retains the assertions that saving sends the edited header without an intermediate write.

web/e2e/settings-connections.spec.ts

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can copy the agent prompt from any finding and feed it to your IDE agent

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗