Skip to content

fix(mosaic): keep sheet steady when moving between fields with the keyboard open - #10349

Draft
alexcarpenter wants to merge 4 commits into
mainfrom
carp/mosaic-sheet-inputs
Draft

alexcarpenter wants to merge 4 commits into
mainfrom
carp/mosaic-sheet-inputs

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Oct 22, 2026 •

Copy link
Copy Markdown
Member

Description

On iOS, a Mosaic dialog shown as a bottom sheet jittered when moving between fields with the on-screen keyboard open. iOS runs its own "reveal" scroll on focus, which pans the page under the fixed sheet.

Following React Aria's usePreventScroll, the dialog track now:

  • refocuses the next text field with preventScroll when focus moves between fields while the keyboard is up (taps and the keyboard's ▲▼ arrows), so iOS does not pan the page
  • scrolls the sheet itself to center the focused field in the band above the keyboard when it is hidden, on focus and whenever the keyboard resizes

Both only act while a keyboard inset is measured, so desktop focus behavior is unchanged.

Also: when iOS pans the visual viewport down while the keyboard is up, the top of the sheet was left above the screen with nothing to scroll and the drag blocked. The pan is now published as --_cl-keyboard-offset and the track pads its top by it, so the whole dialog stays inside the visible band and scrolls within it.

Two more fixes for content that grows while the keyboard is up (e.g. the password strength hint):

  • The keyboard inset is now measured against the box a fixed overlay fills, not documentElement.clientHeight. On iOS that box is likely taller (not confirmed on device), which would make the inset too small and leave the actions behind the keyboard.
  • While the keyboard is up, the page's scroll position is pinned (like Base UI's DrawerVirtualKeyboardProvider), because WebKit's reveal scroll can move the page even while the scroll lock hides overflow.

Tested manually on an iPhone (Safari) against swingset: moving between fields is noticeably steadier. Not yet confirmed on device: the keyboard ▲▼ arrows specifically, autofocus on open leaving Save reachable, the two fixes above, and Chrome on iOS.

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:

@changeset-bot

changeset-bot Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 398b20c

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

This PR includes changesets to release 0 packages

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

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

@vercel

vercel Bot commented Oct 22, 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 Oct 22, 2026 12:16pm UTC
swingset Ready Ready Preview Oct 22, 2026 12:16pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 22, 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
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

@pkg-pr-new

pkg-pr-new Bot commented Oct 22, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10349

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10349

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10349

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10349

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10349

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10349

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10349

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10349

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10349

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10349

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10349

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10349

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10349

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10349

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10349

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10349

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10349

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10349

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10349

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10349

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10349

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10349

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10349

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10349

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10349

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10349

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10349

commit: 398b20c

This branch was successfully deployed

2 active deployments
Preview – swingset — 398b20cd Deployed Oct 22, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 398b20cd Deployed Oct 22, 2026 by vercel[bot]
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.

2 participants