Skip to content

feat(ui): move focus to the entering Flow step after its transition settles - #9743

Draft
alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-flow-autofocus
Draft

feat(ui): move focus to the entering Flow step after its transition settles#9743
alexcarpenter wants to merge 1 commit into
mainfrom
carp/mosaic-flow-autofocus

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

Description

Adds useFlowAutoFocus() to the headless Flow primitive so a step can name the element that should receive focus once its enter transition settles, and wires it into every Reverification view.

Focusing an input as soon as a step mounts scrolls the overflow: hidden viewport to reveal an element that is still translated off-screen, which fights the slide animation. Flow.Step now waits on the same useAnimationsFinished path that gates its exit, then focuses with preventScroll. The initially active step is left to the Dialog or Drawer that opened it; only a closed-to-open change moves focus, and only when focus is currently on the body or inside Flow.Root. A step that closes before it settles drops its pending focus.

A view marks its primary control with the returned ref. When several mounted elements in one step are marked, the first in DOM order wins, and an element that unmounts before the step settles is skipped. Outside a Flow.Step the ref is a no-op, so views stay portable.

Mosaic Otp now forwards its ref to the first slot, following the PhoneInput convention, so the OTP view can target it.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@vercel

vercel Bot commented Sep 12, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Sep 12, 2026 2:17am UTC
swingset Error Error Sep 12, 2026 2:17am UTC

Request Review

@changeset-bot

changeset-bot Bot commented Sep 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2eb8713

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@clerk/ui Patch
@clerk/chrome-extension Patch
@clerk/swingset Patch

Not sure what this means? Click here to learn what changesets are.

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

@coderabbitai

coderabbitai Bot commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant