fix(swap): auto-focus input field when swap view opens

[Khizr97]

Summary

Auto-focuses the source token input field when the swap view opens so users can immediately start typing (REOWN-3541).

Technical Report

Problem

When the user opens the swap page, the input field is not active — they have to manually click on it before typing an amount. This adds an unnecessary interaction step.

Root Cause Analysis

The w3m-swap-input component had no mechanism to auto-focus the input element on mount. The swap view renders two instances of w3m-swap-input (source token and destination token), and neither received focus automatically.

Approach & Reasoning

Added autoFocus boolean property to w3m-swap-input:

• New @Property({ type: Boolean }) public autoFocus = false — defaults to false so existing usages are unaffected
• New firstUpdated() lifecycle hook that queries the shadow DOM for the input element and calls .focus() when autoFocus is true

Why firstUpdated() and not connectedCallback():
firstUpdated() runs after the first render when the shadow DOM is fully constructed. connectedCallback() fires before the first render — the input element doesn't exist yet. firstUpdated() is the correct Lit lifecycle for DOM-dependent initialization.

Why firstUpdated() and not updated():
Focus should only be set once on initial mount, not on every re-render. firstUpdated() runs exactly once per element lifecycle. If the swap view re-renders without destroying the component, focus won't be re-stolen.

Only source token gets focus:
In w3m-swap-view, the attribute is set as ?autoFocus=${target === 'sourceToken'}. The destination token input is disabled/read-only (shows calculated output), so focusing it would be useless.

Optional chaining on querySelector result:
input?.focus() safely handles the (unlikely) case where the input element isn't found in the shadow DOM.

Files Changed

• packages/scaffold-ui/src/partials/w3m-swap-input/index.ts — added autoFocus property + firstUpdated()
• packages/scaffold-ui/src/views/w3m-swap-view/index.ts — passes autoFocus to source token input

Verification

• 15/15 w3m-swap-input tests pass
• 14/14 w3m-swap-view tests pass
• Type check clean
• Existing test fixtures don't pass autoFocus, so they default to false — no behavior change for existing consumers
• No accessibility concern — auto-focusing a primary input on a dedicated page is standard UX

Test plan

• Open swap view — source token input should be focused automatically
• Verify destination token input is NOT focused
• Verify typing works immediately without clicking first

🤖 Generated with Claude Code

[linear]

REOWN-3541 When the user opens the swap page, the input field should already be active

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5949f25

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
appkit-demo	Ready	Preview, Comment	Apr 2, 2026 9:27pm
appkit-gallery	Ready	Preview, Comment	Apr 2, 2026 9:27pm
appkit-headless-sample-app	Ready	Preview, Comment	Apr 2, 2026 9:27pm
appkit-laboratory	Ready	Preview, Comment	Apr 2, 2026 9:27pm

9 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
appkit-basic-example	Ignored		Apr 2, 2026 9:27pm
appkit-basic-sign-client-example	Ignored		Apr 2, 2026 9:27pm
appkit-basic-up-example	Ignored		Apr 2, 2026 9:27pm
appkit-ethers5-bera	Ignored		Apr 2, 2026 9:27pm
appkit-nansen-demo	Ignored		Apr 2, 2026 9:27pm
appkit-wagmi-cdn-example	Ignored		Apr 2, 2026 9:27pm
ethereum-provider-wagmi-example	Ignored		Apr 2, 2026 9:27pm
next-wagmi-solana-bitcoin-example	Ignored		Apr 2, 2026 9:27pm
vue-wagmi-example	Ignored		Apr 2, 2026 9:27pm

[github-actions]

Thank you for your contribution! We ask that you please read and sign our CTA Document before we can accept your contribution. You can sign the CTA simply by posting a Pull Request Comment with the following text:

---

I have read the CTA Document and I hereby sign the CTA

---

_{You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.}