feat(List): let the item and row text be selected and copied - #3097
Draft
Lisa18289 wants to merge 2 commits into
Draft
feat(List): let the item and row text be selected and copied#3097Lisa18289 wants to merge 2 commits into
Lisa18289 wants to merge 2 commits into
Conversation
Lisa18289
added
the
run-visual-tests
github-actions
Bot
removed
the
run-visual-tests
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Contributor
❌ Visual Regression Tests FailedAt least one shard did not pass. If snapshots differ from the committed baselines, download the visual-diffs-* artifacts from this run to inspect the actual/diff images (a shard that failed before comparison, e.g. during install or browser setup, leaves none). If the differences are intentional, update the baselines by adding the |
Lisa18289
force-pushed
the
claude/list-item-select-click-1710d4
branch
2 times, most recently
from
September 2, 2026 11:44
d179976 to
b04003e
Compare
Lisa18289
force-pushed
the
claude/list-item-select-click-1710d4
branch
3 times, most recently
from
September 3, 2026 11:13
22a6a7f to
05222a0
Compare
A ListItem and a table row are click targets, and React Aria sets `user-select: none` on them for the duration of a press, so their text could not be selected. The item's title and subtitle and the table's cells now opt back in, and the click that ends a mouse drag is swallowed in the capture phase — React Aria triggers the press from the click event, so selecting a heading would otherwise activate the item as well. Dragging never activates an item, whether or not it selected text: a drag that missed the text would otherwise navigate away rather than do nothing. A click that changed the text selection is swallowed regardless of distance, which covers selecting a single character and selecting by long press on touch. An ordinary click still activates the item, including one that wobbles a few pixels or lands inside an existing selection, where the browser keeps the selection alive until after the click. A drag that started on an interactive child is left alone, as is any click arriving without a pointer interaction — keyboard, screen reader, `element.click()`. The title box hugs its text exactly, so a drag would have had to hit the text pixel for pixel. The header around it is selectable as well, and the title carries padding cancelled out by the same negative margin, so a drag can start beside the text without moving it. Only a native drag creates a real text selection, and every parallel test file shares one page and one Playwright cursor, so another file's click releases the held button mid-drag. The `browser-mouse` project gives those tests a page of their own, one file at a time. Needs #3066 to work in Safari: WebKit has no unprefixed `user-select`, so without autoprefixer the rule does not apply there and the webkit browser project fails. Closes #895 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
force-pushed
the
claude/list-item-select-click-1710d4
branch
from
September 3, 2026 11:15
05222a0 to
17cc149
Compare
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.
A ListItem and a table row are click targets, and React Aria sets
user-select: noneon them while pressing, so their text could never beselected. The item's title and subtitle and the table's cells now opt back in.
Dragging never activates an item, whether or not it selected text — React Aria
triggers the press from the click event, so selecting a heading would otherwise
activate the item, and a drag that missed the text would navigate away rather
than do nothing. An ordinary click still activates it, including one that
wobbles a few pixels or lands inside an existing selection. Drags starting on an
interactive child, and clicks arriving without a pointer interaction (keyboard,
screen reader), are left alone.
The title box hugs its text exactly, so a drag would have had to hit the text
pixel for pixel. The header around it is selectable as well, and the title
carries padding cancelled out by the same negative margin, so a drag can start
beside the text without moving it. Verified against Storybook: six stories,
including the long-word edge case, render byte-identical.
Depends on #3066. WebKit has no unprefixed
user-select, so withoutautoprefixer the rule does not apply in Safari and the webkit browser project
fails six tests. Merge that first, then update this branch — with the prefix in
place locally the whole components browser suite is green (548 tests).
The drag tests live in a new
browser-mousevitest project. Only a native dragcreates a real text selection, and parallel test files share one page and one
Playwright cursor, so another file's click releases the held button mid-drag.
The cursor over the text stays
pointer. Making ittextwould weaken the"this whole row is clickable" affordance, so that is a UX call rather than part
of this change.
Closes #895
🤖 Generated with Claude Code