fix(clerk-js): SelectOption improvements #6999

alexcarpenter · 2025-10-15T19:17:50Z

Description

Ensures there a no dead spots between items
Fixes focus state
Updates background color to muted, similar to role select update here refactor(clerk-js): Tackle design feedback adjustments #6934

BEFORE

Screen.Recording.2025-10-15.at.3.18.57.PM.mov

AFTER

Screen.Recording.2025-10-15.at.3.18.07.PM.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

Summary by CodeRabbit

Style
- Updated select dropdown visuals: hover and selection now use a theme-consistent muted background plus a subtle highlight element, improving clarity and focus.
- Increased touch area and adjusted option layout to remove dead spots and improve navigation/selection on touch devices.
- Removed redundant hover/focus styling in one member-role list to avoid duplicate highlighting.
Tests
- Made a test interaction more robust by forcing the click when selecting expiration options to reduce flakiness.
Chores
- Added a patch release changeset documenting these fixes.

changeset-bot · 2025-10-15T19:17:55Z

🦋 Changeset detected

Latest commit: 74a150c

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

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

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

vercel · 2025-10-15T19:17:58Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Oct 16, 2025 1:50pm

coderabbitai · 2025-10-15T19:18:19Z

Walkthrough

The Select default option renderer signature drops the isFocused parameter; option styling now uses hover and [data-focused] with a ::before pseudo-element and position: relative. RoleSelect hover/focus SX background styling was removed. A changeset was added and a Playwright click was made forced.

Changes

Cohort / File(s)	Summary
Select option rendering & styles `packages/clerk-js/src/ui/elements/Select.tsx`	`defaultRenderOption` signature changed to remove `isFocused`; option container set to `position: relative`; hover and `[data-focused]` styling moved to `common.mutedBackground(theme)` and a `::before` pseudo-element; call sites still pass `isSelected` as third arg though default renderer no longer accepts the third parameter.
RoleSelect option styling removal `packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx`	Removed hover/focus background `sx` styles from `RolesListItem` used in `RoleSelect`'s `renderOption`; removed `common` from `styledSystem` imports.
Playwright test interaction `packages/testing/src/playwright/unstable/page-objects/apiKeys.ts`	`click()` changed to `click({ force: true })` in `selectExpiration` to force the click on the expiration option.
Release notes / changeset `.changeset/forty-experts-battle.md`	Added changeset documenting fixes: focus styles for SelectOption and increased touch area between SelectOption items.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant UI as Select UI
  participant Renderer as Option Renderer

  User->>UI: open dropdown / navigate items
  UI->>Renderer: render(option, index, isSelected)
  Note right of Renderer #eef7ff: defaultRenderOption now expects (option, index) — ignores isFocused
  Renderer-->>UI: option element (position:relative with ::before)
  User->>UI: hover or keyboard focus on item
  UI->>UI: apply :hover or [data-focused] state
  Note right of UI #f6fff0: CSS uses hover / [data-focused] + ::before to show background and larger touch area

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit nibbles on one-less-arg delight,
Hops past focus, leaves a soft hover light.
A tiny ::before broadens every row,
Clicks coaxed gently, fewer backgrounds show.
Small tweak, snug touch — we hop and glow. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly specifies that this PR fixes and enhances the SelectOption component within the clerk-js package, which aligns directly with the changes to focus handling, hover styling, and spacing described in the diff. It succinctly identifies the affected module and the nature of the update without extraneous detail. This makes it easy for reviewers to understand the primary intent at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch alexcarpenter/select-option-improvements

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3f603a5 and 74a150c.

📒 Files selected for processing (1)

packages/testing/src/playwright/unstable/page-objects/apiKeys.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{js,jsx,ts,tsx}