Skip to content

feat(ui): Add clear button to search inputs - #9098

Merged
alexcarpenter merged 8 commits into
mainfrom
feat/api-keys-search-clear-button
Jul 9, 2026
Merged

feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom
feat/api-keys-search-clear-button

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Jul 7, 2026•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

Description

BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM

Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.

BEFORE

before.mov

AFTER

after.mov

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:

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.

@vercel

vercelBot commented Jul 7, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm

Request Review

@changeset-bot

changeset-botBot commented Jul 7, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: a304947

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

This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch

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

coderabbitaiBot commented Jul 7, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.

Changes

Search clear button rollout

Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button
Loading

Possibly related PRs

  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.

Suggested reviewers:maxyinger

Poem

A bunny tapped the search to clear,
and poof—the query disappeared.
A tiny button, snug and bright,
hops in with themeable delight.
No crumbs, no clutter, all serene 🐇

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.

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

@pkg-pr-new

pkg-pr-newBot commented Jul 7, 2026•
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: a304947

@github-actions

github-actionsBot commented Jul 7, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-07-09T15:58:20.550Z

Summary

MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0

🤖 This report was reviewed by claude-sonnet-4-6.

@clerk/shared

Current version: 4.25.1
Recommended bump: MINOR → 4.26.0

Subpath ./types

🟡 Non-breaking Changes (1)

Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...

Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…

🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.

@clerk/ui

Current version: 1.25.1
Recommended bump: MINOR → 1.26.0

Subpath ./internal

🟡 Non-breaking Changes (1)

Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...

Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…

🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.

Report generated by Break Check

Last ran on a304947.

@alexcarpenteralexcarpenter changed the title feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed the feat/api-keys-search-clear-button branch from e0215fd to 5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter requested a review from a teamJuly 8, 2026 18:46
maxyinger
maxyinger approved these changes Jul 8, 2026
View reviewed changes

@maxyingermaxyinger left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

Comment threadpackages/ui/src/elements/InputWithIcon.tsx Outdated
// Keyboard activation produces a synthetic click with detail === 0. The button is about to go
// inert and drop out of the tab order, so return focus to the input. A pointer click leaves
// focus alone.
if (event.detail === 0) {

@maxyingermaxyingerJul 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til

@alexcarpenter
alexcarpenter merged commit 8dbf343 into mainJul 9, 2026
51 checks passed
@alexcarpenter
alexcarpenter deleted the feat/api-keys-search-clear-button branch July 9, 2026 16:05
@clerk-cookieclerk-cookie mentioned this pull request Jul 9, 2026
Merged
alexcarpenter added a commit that referenced this pull request Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees

No one assigned

Labels

localizationsui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', '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('^' + ".*" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, '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" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, '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('^' + ".*" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, '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); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
feat(ui): Add clear button to search inputs by alexcarpenter · Pull Request #9098 · clerk/javascript · GitHub
Skip to content
feat(ui): Add clear button to search inputs - #9098
Merged
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Jul 9, 2026
Merged
feat(ui): Add clear button to search inputs#9098
alexcarpenter merged 8 commits into
mainfrom 
feat/api-keys-search-clear-button
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 7, 2026•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
Description
BEFOREAFTER
Screenshot 2026-07-07 at 11 25 47 AMScreenshot 2026-07-07 at 11 25 59 AM
Introduce new SearchInput element to create consistency across search inputs with a new custom clear button vs relying on the system styling which is inconsistent across browsers.
BEFORE
before.mov
AFTER
after.mov
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:
Summary by CodeRabbit
Summary by CodeRabbit
  • New Features
    • Added clear buttons to API Keys and Organization Profile member search fields.
    • Introduced a dedicated search input component with consistent behavior (including loading indicator support).
    • Clear button label is now localizable, and styling is controlled via the shared UI theme.
  • Bug Fixes
    • Clear actions now immediately reset the query (and cancel any pending debounce) while maintaining appropriate keyboard/focus behavior.
    • The browser’s default search cancel control is hidden to avoid duplicate clear UI.
@vercel
vercelBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 9, 2026 3:56pm
swingsetReadyReadyPreview, CommentJul 9, 2026 3:56pm
Request Review
@changeset-bot
changeset-botBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: a304947
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 23 packages
NameType
@clerk/localizationsPatch
@clerk/sharedPatch
@clerk/uiPatch
@clerk/reactPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/chrome-extensionPatch
@clerk/clerk-jsPatch
@clerk/electronPatch
@clerk/expo-passkeysPatch
@clerk/expoPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/headlessPatch
@clerk/honoPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch
@clerk/swingsetPatch
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
coderabbitaiBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds clear-button support to shared input UI, wires it into API Keys and Organization Profile member search, and extends theme, descriptor, type, and localization support for the new appearance keys.
Changes
Search clear button rollout
Layer / File(s)Summary
Shared trailing-button style
packages/ui/src/styledSystem/common.ts, packages/ui/src/baseTheme.ts, packages/ui/src/elements/PasswordInput.tsx		Adds shared trailing-edge button styling helpers, applies them to theme elements, and reuses the helper for PasswordInput show/hide button styling.
Appearance, localization, and changeset
packages/ui/src/customizables/elementDescriptors.ts, packages/ui/src/internal/appearance.ts, packages/shared/src/types/localization.ts, packages/localizations/src/en-US.ts, .changeset/api-keys-search-clear-button.md, packages/localizations/src/*		Extends appearance descriptors and config types with the new search clear-button keys, adds matching localization keys and en-US strings, and records the patch release in the changeset.
InputWithIcon and SearchInput
packages/ui/src/elements/InputWithIcon.tsx, packages/ui/src/elements/SearchInput.tsx		Expands InputWithIcon props and behavior to render and manage an optional trailing clear button, and adds SearchInput as a preset that fixes search input behavior, loading icon handling, and clear-button defaults.
Search call sites
packages/ui/src/components/APIKeys/APIKeys.tsx, packages/ui/src/components/OrganizationProfile/MembersSearch.tsx		Wires the clear action into the API Keys and Organization Profile member search inputs, resetting their search state and passing labels and appearance descriptors.
Estimated code review effort: 3 (Moderate) | ~25 minutes
Sequence Diagram(s)
sequenceDiagram
participant APIKeysPage
participant MembersSearch
participant SearchInput
participant InputWithIcon
APIKeysPage->>SearchInput: onClear, searchValue
MembersSearch->>SearchInput: onClear, value, loading state
SearchInput->>InputWithIcon: preset search type and clear-button label
InputWithIcon->>InputWithIcon: render trailing Close button

Loading
Possibly related PRs
  • clerk/javascript#9055: Both PRs modify packages/ui/src/components/APIKeys/APIKeys.tsx; this one adds the clear-search wiring, while the other adjusts accessibility-related search input attributes.
  • clerk/javascript#9096: Both PRs touch packages/ui/src/elements/PasswordInput.tsx and shared trailing-button styling, so they overlap at the same component/theme level.
Suggested reviewers:maxyinger
Poem
A bunny tapped the search to clear,

and poof—the query disappeared.

A tiny button, snug and bright,

hops in with themeable delight.

No crumbs, no clutter, all serene 🐇
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately summarizes the main UI change: adding a clear button to search inputs.
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.
Comment @coderabbitai help to get the list of available commands.
@pkg-pr-new
pkg-pr-newBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9098

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: a304947
@github-actions
github-actionsBot
commented
Jul 7, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-09T15:58:20.550Z
Summary
MetricCount
Packages analyzed19
Packages with changes2
🔴 Breaking changes0
🟡 Non-breaking changes2
🟢 Additions0
🤖 This report was reviewed by claude-sonnet-4-6.
@clerk/shared
Current version: 4.25.1
Recommended bump: MINOR → 4.26.0
Subpath ./types
🟡 Non-breaking Changes (1)
Modified: __internal_LocalizationResource
// ... 6 unchanged lines elided ...
socialButtonsBlockButton: LocalizationValue<'provider'>;
socialButtonsBlockButtonManyInView: LocalizationValue<'provider', `${string}{{provider|titleize}}${string}`>; /** Label for the “Last used” badge on authentication strategies. */
lastAuthenticationStrategy: LocalizationValue;
- dividerText: LocalizationValue;+ dividerText: LocalizationValue; /** Shared strings for search inputs across the components. */+ searchInput: {+ action__clear: LocalizationValue;+ };
formFieldLabel__emailAddress: LocalizationValue;
formFieldLabel__emailAddresses: LocalizationValue;
formFieldLabel__phoneNumber: LocalizationValue;
// ... 1964 unchanged lines elided ...
Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…
🤖 AI review (reclassified as non-breaking) (90%): The only difference is the addition of a new optional searchInput property (with action__clear: LocalizationValue) to __internal_LocalizationResource. Since LocalizationResource extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, this type is used as an output/source shape, and adding a new property to an output type does not break existing consumers who neither pass it nor read it.
@clerk/ui
Current version: 1.25.1
Recommended bump: MINOR → 1.26.0
Subpath ./internal
🟡 Non-breaking Changes (1)
Modified: ElementsConfig
// ... 136 unchanged lines elided ...
formFieldInputShowPasswordIcon: WithOptions;
formFieldInputCopyToClipboardButton: WithOptions;
formFieldInputCopyToClipboardIcon: WithOptions;
+ searchInput: WithOptions;+ searchInputClearButton: WithOptions;
phoneInputBox: WithOptions<never, ControlState>;
formInputGroup: WithOptions<never, ControlState>;
segmentedControlRoot: WithOptions;
// ... 411 unchanged lines elided ...
Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…
🤖 AI review (reclassified as non-breaking) (82%): The diff shows 2 additional lines elided in the after snippet (475 vs 473), indicating new properties were added to ElementsConfig; ElementsConfig is used only as a mapped-type source for the output type Elements, so consumers only read values of this type rather than constructing them, making new property additions non-breaking.
Report generated by Break Check
Last ran on a304947.
@alexcarpenteralexcarpenter
changed the title
feat(ui): Add clear button to API keys search inputfeat(ui): Add clear button to search inputsJul 7, 2026
@alexcarpenter
feat(ui): Add clear button to API keys search input
402ce89
Adds a clear (X) button anchored to the trailing edge of the API keys search input. The button stays mounted and toggles via opacity + inert to avoid layout shift, refocuses the input on keyboard clear, and shares trailing-button chrome with the password toggle via a new common.inputTrailingButton helper. Themeable via apiKeysSearchClearButton and labeled via apiKeys.action__clearSearch.
@alexcarpenter
refactor(ui): Move clear button into InputWithIcon and add to members…
cc37a9d
… search
Generalizes the API keys search clear button into an opt-in onClear prop on InputWithIcon (clear button, opacity + inert toggle, keyboard refocus, native cancel hidden) and applies it to the OrganizationProfile members search. Adds the organizationProfileMembersSearchClearButton appearance element and organizationProfile.membersPage.action__clearSearch localization key.
@alexcarpenter
refactor(ui): Introduce shared SearchInput with a single clear-button…
3369b2b
… element
Replaces the per-consumer clear-button descriptors (apiKeysSearchClearButton, organizationProfileMembersSearchClearButton) and localization keys with a single SearchInput element that bakes in the search icon/spinner and a trailing clear button. The clear button uses one shared searchInputClearButton appearance element and the shared searchInput.action__clear localization key, so new search inputs need no additional theming or localization surface.
@alexcarpenter
feat(ui): Add shared searchInput appearance element
f43b49c
SearchInput layers a shared searchInput descriptor onto the underlying input alongside any consumer-specific element (e.g. apiKeysSearchInput), so all search inputs can be themed together via cl-searchInput.
@alexcarpenter
chore(localizations): Align locales with searchInput key
5bd3108
@alexcarpenter
alexcarpenterforce-pushed
the
feat/api-keys-search-clear-button
branch
from
e0215fd to
5bd3108CompareJuly 7, 2026 19:05
@alexcarpenter
alexcarpenter
requested a review
from a teamJuly 8, 2026 18:46
maxyinger
maxyinger
approved these changes
Jul 8, 2026
View reviewed changes
@maxyingermaxyinger
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀
Comment threadpackages/ui/src/elements/InputWithIcon.tsx
Outdated

 // Keyboard activation produces a synthetic click with detail === 0. The button is about to go
 // inert and drop out of the tab order, so return focus to the input. A pointer click leaves
 // focus alone.
 if (event.detail === 0) {
@maxyingermaxyingerJul 8, 2026

Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

til
@alexcarpenter
alexcarpenter
merged commit 8dbf343
into
mainJul 9, 2026

51 checks passed

@alexcarpenter
alexcarpenter
deleted the

feat/api-keys-search-clear-button

branch
July 9, 2026 16:05
@clerk-cookieclerk-cookie
mentioned this pull request
Jul 9, 2026
 Merged

alexcarpenter added a commit
that referenced
this pull request
Jul 15, 2026
@alexcarpenter
fix(ui): restore searchInput element descriptors dropped during rebase
d8a8647
A rebase over #9098 dropped the searchInput and searchInputClearButton
entries from ElementsConfig and APPEARANCE_KEYS, breaking @clerk/ui's
type-check (SearchInput.tsx still references them) and, in turn, every
downstream build including the swingset preview deploy.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

localizationsui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger