Skip to content

fix(mosaic): forward refs from every part that renders through useRender - #10505

Merged
austincalvelage merged 2 commits into
mainfrom
austin/mosaic-primitive-forward-ref
Oct 28, 2026
Merged

austincalvelage merged 2 commits into
mainfrom
austin/mosaic-primitive-forward-ref

Conversation

@austincalvelage

Copy link
Copy Markdown
Member

Description

Mosaic still supports React 18, where a function component that isn't wrapped in React.forwardRef drops a consumer's ref and logs a warning. Twenty exported Mosaic parts did this, so a ref passed to them came back null.

Every part that renders through useRender now forwards its ref to the rendered element, along with the component Menu.Separator. Where a part already held internal refs (Select.Option, Tabs.List, Accordion.Root, Accordion.Trigger), the consumer ref is merged in alongside them, so roving focus and anchoring keep working.

A new mosaic/forward-ref-parts lint rule fails when an exported part renders through useRender without forwardRef, or wraps itself in forwardRef but never passes the ref to useRender. docs/headless.md notes the requirement.

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:

Adds the mosaic/forward-ref-parts lint rule and wraps the parts it flags in
React.forwardRef so consumer refs reach the DOM element on React 18.
@vercel

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

Request Review

@changeset-bot

changeset-bot Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4a794d9

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

@coderabbitai

coderabbitai Bot commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

Caution

Review failed

The pull request is closed.

  • 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 28, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-biometrics

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

@clerk/expo-google-signin

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

@clerk/expo-native-components

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/mosaic

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 4a794d9

@austincalvelage
austincalvelage marked this pull request as ready for review October 28, 2026 23:49
@austincalvelage
austincalvelage enabled auto-merge (squash) October 28, 2026 23:49
@austincalvelage
austincalvelage merged commit cb8638a into main Oct 28, 2026
91 of 92 checks passed
@austincalvelage
austincalvelage deleted the austin/mosaic-primitive-forward-ref branch October 28, 2026 23:51

This branch was successfully deployed

2 active deployments
Preview – swingset — 4a794d98 Deployed Oct 28, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 4a794d98 Deployed Oct 28, 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