') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(ui): Add appearance option to disable autofocus by alexcarpenter · Pull Request #8521 · clerk/javascript · GitHub
Skip to content

feat(ui): Add appearance option to disable autofocus - #8521

Merged
brkalow merged 4 commits into
mainfrom
carp/autofocus-option
May 18, 2026
Merged

feat(ui): Add appearance option to disable autofocus#8521
brkalow merged 4 commits into
mainfrom
carp/autofocus-option

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented May 11, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Description

Adds new appearance option to disable autofocus input behaviors within the components.

Docs PR: clerk/clerk-docs#3360

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

vercelBot commented May 11, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 13, 2026 2:58pm

Request Review

@changeset-bot

changeset-botBot commented May 11, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: da4c66e

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

This PR includes changesets to release 2 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch

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

@alexcarpenteralexcarpenter mentioned this pull request May 11, 2026
Merged
2 tasks
@alexcarpenter
alexcarpenter marked this pull request as ready for review May 12, 2026 13:10
@coderabbitai

coderabbitaiBot commented May 12, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

This PR introduces a configurable autoFocus appearance option to the @clerk/ui package, enabling applications to globally disable automatic input focusing behavior. The option is defined in the Options type with a default value of true, then integrated across form and input components—including FieldControl, MfaBackupCodeCreateForm, SuccessPage, CodeControl, and TagInput—so they read the appearance option and apply it to control autofocus on element mount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately and concisely summarizes the main change: adding an appearance option to disable autofocus behavior in UI components.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Description check✅ PassedThe PR description clearly explains the purpose: adding a new appearance option to disable autofocus input behaviors. It is directly related to the changeset modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@pkg-pr-new

pkg-pr-newBot commented May 12, 2026•
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8521

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: da4c66e

@brkalow
brkalow merged commit bbbdd63 into mainMay 18, 2026
43 checks passed
@brkalow
brkalow deleted the carp/autofocus-option branch May 18, 2026 15:41
@clerk-cookieclerk-cookie mentioned this pull request May 18, 2026
Merged
@coderabbitaicoderabbitaiBot mentioned this pull request May 18, 2026
Merged
9 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brkalowbrkalowbrkalow approved these changes

Assignees

No one assigned

Labels

ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@brkalow