fix(headless): Select arrow up/down to open

[alexcarpenter]

Description

Fix Select keyboard navigation so opening from a focused trigger with the up or down arrow focuses the selected option.

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

• Bug Fixes

  • Improved Select component's keyboard navigation and selection state tracking.

• Tests

  • Added keyboard navigation tests for the Select component.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 23, 2026 8:06pm
swingset	Ready	Preview, Comment	Jun 23, 2026 8:06pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 7ee1cab

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

This PR includes changesets to release 0 packages

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

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

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

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds setSelectedIndex (a React state dispatcher) to the SelectContextValue interface, threads it through SelectInner's context provider and useMemo dependency array, and consumes it in SelectOption via a new useEffect that synchronizes the selected index when an option is selected. A parameterized keyboard navigation test is also added.

Changes

Select selected-index synchronization

Layer / File(s)	Summary
Context contract and provider wiring packages/headless/src/primitives/select/select-context.ts, packages/headless/src/primitives/select/select-root.tsx	SelectContextValue gains the setSelectedIndex dispatcher field; SelectInner's context provider value and useMemo dependency array are updated to include it.
SelectOption sync effect and tests packages/headless/src/primitives/select/select-option.tsx, packages/headless/src/primitives/select/select.test.tsx, .changeset/quiet-trees-select.md	SelectOption destructures setSelectedIndex from context and a new useEffect calls setSelectedIndex(index) when the option is selected. A parameterized it.each test verifies {ArrowDown} and {ArrowUp} open the listbox and focus the correct option with data-cl-selected and data-cl-active.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• kylemac

Poem

🐇 Hop, hop! The select now knows,
Which option is picked wherever focus goes.
An effect sync'd with index and state,
Arrow keys dance — up, down — feeling great!
The context is wired, the tests all agree,
Little rabbit says: "That's how it should be!" 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(headless): Select arrow up/down to open' directly addresses the main change: fixing keyboard navigation (arrow up/down) for the Select component to open the dropdown. It is concise, specific, and clearly summarizes the primary change.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 7ee1cab

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/quiet-trees-select.md:
- Around line 1-2: The changeset file is currently empty with only frontmatter
delimiters, which means the keyboard accessibility fix in packages/headless will
not be documented or trigger a version bump when released. Add a changeset entry
inside the file that specifies the affected package (packages/headless), the
appropriate version bump type (patch for bug fixes), and a concise summary
describing the keyboard accessibility improvements made to the Select component.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: c750e2c7-c393-486b-9835-f5cba3a95990

📥 Commits

Reviewing files that changed from the base of the PR and between f43071d and 7ee1cab.

📒 Files selected for processing (5)

• .changeset/quiet-trees-select.md
• packages/headless/src/primitives/select/select-context.ts
• packages/headless/src/primitives/select/select-option.tsx
• packages/headless/src/primitives/select/select-root.tsx
• packages/headless/src/primitives/select/select.test.tsx