fix(Command): rename item's data-selected attribute to data-highlighted - #2085
Open
jose-manuel-silva wants to merge 2 commits into
Open
fix(Command): rename item's data-selected attribute to data-highlighted#2085jose-manuel-silva wants to merge 2 commits into
jose-manuel-silva wants to merge 2 commits into
Conversation
Command.Item toggles its active-item attribute on every hover transition. Sharing the data-selected name with Calendar/Select/Pagination (persistent selection) means any consumer CSS containing :has([data-selected]) makes Chromium's :has() invalidator run large style recalcs per hover, freezing the page (huntabyte#2044). data-highlighted matches the transient-state convention used by Select, Combobox, Menu, and RangeCalendar's hover preview.
🦋 Changeset detectedLatest commit: 9058e92 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Contributor
built with Refined Cloudflare Pages Action⚡ Cloudflare Pages Deployment
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fix(Command): rename
Command.Item'sdata-selectedtodata-highlightedFixes #2044
Problem
Command.Itemtogglesdata-selectedon every pointer-hover transition (2 attribute mutations per item change). Calendar, RangeCalendar, Select, and Pagination use the same attribute name for persistent selection.Chromium's
:has()invalidation is document-global: every attribute name appearing inside any:has()argument goes into one flat feature set, and any mutation of such an attribute triggers an ancestor walk that invalidates every:has()-anchored element's subtree. So a single consumer rule written for the calendar —— combined with a broad anchor like shadcn-svelte's
<body class="group/body">(everygroup-has-*/body:*utility makes<body>a:has()anchor) turns each Command hover into a whole-document style recalc.Measured on a shadcn-svelte-style page (~3,700 elements, real shadcn-svelte.com stylesheet):
data-selectedtoggleHovering across items produces 250 ms+ frames per transition — the combobox freezes and skips items. On shadcn-svelte.com itself: 108.5 ms per toggle vs 0.00 ms for a control attribute.
Standalone repro with the benchmark harness (loads the real shadcn-svelte.com stylesheet in full/stripped variants): https://github.com/jose-manuel-silva/bits-ui-2044-repro
Fix
Rename the transient hover/keyboard-navigation attribute to
data-highlighted, the convention bits-ui already uses for exactly this state inSelect,Combobox,Menu, andRangeCalendar's hover range preview. This breaks the name collision, so selection-styling:has([data-selected])rules no longer observe Command's hover churn.aria-selectedis unchanged (Base UI and cmdk keep it for the active option).data-selectedon Calendar/RangeCalendar/Select/Pagination is untouched — there it denotes genuine persistent selection and only mutates on click.Breaking change
Consumers styling Command items via
[data-selected]/ Tailwinddata-selected:must switch to[data-highlighted]/data-highlighted:. Changeset is markedminor; happy to bump tomajorif preferred.A dual-emission deprecation period (emitting both attributes for a release cycle) unfortunately can't work here: the
data-selectedmutations themselves are what trigger the:has()invalidation, so keeping the old attribute keeps the bug. The rename has to be clean.shadcn-svelte's
commandcomponent will need the corresponding one-line class updates (can PR that separately once this lands).Changes
packages/bits-ui/src/lib/bits/command/command.svelte.ts— emitdata-highlightedonCommand.Item(inherited byCommand.LinkItem); update the internal#getSelectedItem()selector.tests/src/tests/command/{command,command-scroll,command-grid}.browser.test.ts— assertions updated.docs/src/lib/content/api-reference/command.api.ts— data-attribute table:selected→highlighted.docs/src/lib/styles/command/command.css, example CSS (vercel/linear/framer/raycast),command-demo*.svelte,command-grid-demo.svelte,search.svelte— docs-site styling migrated..changeset/heavy-hairs-hover.mdLeft alone: Combobox tests'
data-selectedassertions (persistent selection — the model Command is being aligned to) andtheme-switcher.svelte's author-owneddata-selected={isActive}button attribute.Note on #2074
Open PR #2074 (
fix(Command): item selection logic) adds a test assertingdata-selectedon Command items. The source regions don't overlap, but whichever PR lands second needs a small test update — happy to rebase this branch once #2074 merges.Test plan
pnpm vitest run src/tests/command— 42/42 pass (chromium + webkit).pnpm run check+pnpm run buildinpackages/bits-ui— clean.data-selectedmutations and no long frames with the full shadcn stylesheet loaded.Written by Fable 5, reviewed by me.