Skip to content

tabs: Avoid matching :focus-visible when a trigger is clicked - #4263

Open
fushanbobfan wants to merge 1 commit into
radix-ui:mainfrom
fushanbobfan:tabs-click-focus-visible
Open

fushanbobfan wants to merge 1 commit into
radix-ui:mainfrom
fushanbobfan:tabs-click-focus-visible

Conversation

@fushanbobfan

Copy link
Copy Markdown

Description

Fixes #4262.

Since #4060, Tabs.Trigger calls focus() on itself in onMouseDown. At that point the browser has not registered the pointer interaction yet, so Chromium treats the script focus as keyboard focus and the clicked trigger matches :focus-visible. A mouse click then shows the focus ring whenever the previous interaction was the keyboard or nothing had been clicked yet.

This change passes { focusVisible: false } to that focus() call. The call only runs for a left mouse button press, so focus from Tab and the arrow keys still matches :focus-visible. Slider already calls focus with this option and declares it on FocusOptions (TypeScript 5.9's DOM lib does not have it yet); Tabs gets the same declaration. Browsers without the option ignore it and keep the current behavior.

Tests

  • tabs: a mousedown on a trigger focuses it with focusVisible: false. Fails on main, passes with this change.
  • pnpm test (48 files, 1200 passed, 2 skipped), pnpm lint, pnpm types:check and pnpm format:check pass.
  • In Storybook (components-tabs--styled, Playwright with Chromium 149, real mouse and key events), after a fresh load and after an arrow key press, clicking a trigger matched :focus-visible on main and does not match with this change. An arrow key press still matches it.

@changeset-bot

changeset-bot Bot commented Oct 31, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2be6547

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

This PR includes changesets to release 2 packages
Name Type
@radix-ui/react-tabs Patch
radix-ui 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

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tabs] A mouse click on Tabs.Trigger matches :focus-visible (since 1.1.22, the focus() added in #4060)

1 participant