Selection Behavior 'replace' #2013

snowystinger · 2021-06-11T22:12:40Z

Closes #2018
Adds selectionBehavior prop which can be toggle or replace. Previously, it was always toggle, this specifically adds replace.
This is added for mouse/touch and keyboard is handled the way it is in Windows where alt + arrows will allow a user to navigate and select a non-contiguous set of items

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

add demo stories fix clicking without shift

adobe-bot · 2021-06-14T20:37:24Z

Build successful! 🎉

adobe-bot · 2021-06-14T21:20:40Z

Build successful! 🎉

adobe-bot · 2021-06-15T22:58:17Z

Build successful! 🎉

LFDanLu

Mainly story things, but some odd cases noted as well

packages/@react-aria/selection/stories/useSelectableList.stories.tsx

LFDanLu · 2021-06-15T22:51:54Z

packages/@react-aria/selection/stories/useSelectableList.stories.tsx

+            <code>selectOnFocus</code> is true ❌
+          </li>
+        </ol>
+        <List selectionMode="multiple" disallowEmptySelection>


Is this one is supposed to disallowEmptySelection? I can deselect all selection via clicking

So I wasn't sure what to do with this one, the code in SelectionManager is VERY specific that disallowEmptySelection only applies to single selection
https://github.com/adobe/react-spectrum/blob/main/packages/@react-stately/selection/src/SelectionManager.ts#L369

hmm, I guess it makes sense that disallowEmptySelection doesn't apply for multiselect, can't really think of a use case for that

LFDanLu · 2021-06-15T22:59:25Z

packages/@react-spectrum/table/stories/Table.stories.tsx

+  .add(
+    'multiple selection selectionBehavior replace',
+    () => (
+      <TableView aria-label="TableView with dynamic contents" selectionMode="multiple" selectionBehavior="replace" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>


Feels odd to be unable to deselect a selected row by clicking its checkbox. Also noticed that shift + click doesn't quite work if you click on the row's checkbox cell

Perhaps TableView should work a bit differently with replace?
EDIT: Ah I see, the CMD key modifier allows for this. Is there a spec somewhere that describes the expected behavior?

So I was unable to figure out how to do this with Finder, however, you can select disparate files with the mouse by holding CMD, so I thought that might be a good way to approach this. Agreed, less than ideal that CMD + Space (which usually acts as a press) brings up the spotlight search, but I don't have a good alternative and I think it's a well known shortcut, so if someone hits that, they'd automatically try Enter anyways?

I think that is reasonable, perhaps something to note in the docs

packages/@react-stately/selection/src/SelectionManager.ts

adobe-bot · 2021-06-15T23:45:32Z

Build successful! 🎉

adobe-bot · 2021-06-21T21:04:23Z

Build successful! 🎉

… on focus mode

adobe-bot · 2021-06-23T22:39:56Z

Build successful! 🎉

adobe-bot · 2021-06-23T22:43:29Z

Build successful! 🎉

LFDanLu

Just one question but otherwise the behavior seems right to me

LFDanLu · 2021-07-01T18:55:15Z

packages/@react-aria/selection/src/useSelectableCollection.ts

    // Keyboard events bubble through portals. Don't handle keyboard events
    // for elements outside the collection (e.g. menus).
-    if (e.altKey || !ref.current.contains(e.target as HTMLElement)) {
+    if ((e.altKey && !e.ctrlKey) || !ref.current.contains(e.target as HTMLElement)) {


This addition is supposed to prevent ctrl + alt (aka control + option on Mac) from being handled by the child element right? Right now in https://reactspectrum.blob.core.windows.net/reactspectrum/83a514c745dcc6475b057e38ac23c3292b8c8770/storybook/index.html?path=/story/tableview--crud ctrl + alt + arrow down still opens the menu.

that story isn't a replacement behavior, so it shouldn't need this anyways?

devongovett · 2021-07-21T22:38:10Z

So I think there's a few things that need to happen here:

selectionBehavior = 'replace' and selectOnFocus should be a single option (selectionBehavior is a better name). They should always be applied together, and shouldn't be used separately.
I see that ctrl + alt + arrow keys moves the focus without changing the selection, but I couldn't figure out a way to add the focused item to the selection without replacing it. Should that be ctrl + alt + space key or something?
I think we should wait on having a UI for highlight style before merging this. It shouldn't be possible to have checkboxes with selectionBehavior = replace. Still waiting on spectrum for this, so maybe we can combine your PRs related to this into a single feature branch until then.

* Mobile updates for selection * Move mobile awareness to the component * fix lint * move to touch/vo detection

* Select on focus first time in collection * fix lint * Only start selecting on first focus if selectOnFocus is on * add a test * fix aria * fix lint * remove dead code * fix lint

adobe-bot · 2021-07-21T22:50:27Z

Build successful! 🎉

adobe-bot · 2021-07-21T22:51:26Z

Build successful! 🎉

adobe-bot · 2021-07-22T01:35:09Z

Build successful! 🎉

Followup to selectOnFocus

f8acf33

add demo stories fix clicking without shift

snowystinger requested review from dannify and devongovett as code owners June 11, 2021 22:12

add selectionBehavior

cc4baaf

snowystinger changed the title ~~[WIP] - Followup to selectOnFocus~~ Followup to selectOnFocus Jun 14, 2021

snowystinger changed the title ~~Followup to selectOnFocus~~ Selection Behavior 'replace' Jun 14, 2021

Add story for useSelectableList

425c142

update default

fa1f1f8

LFDanLu requested changes Jun 15, 2021

View reviewed changes

cleanup stories

1fd01ba

snowystinger mentioned this pull request Jun 17, 2021

Write tests for ListBox/Table to cover selection behavior #1906

Closed

snowystinger added 2 commits June 17, 2021 16:57

remove extraneous dependency

af04353

Merge branch 'main' into 1905-selectonfocus-updates

7855bb3

snowystinger and others added 3 commits June 21, 2021 15:30

support keyboard navigation without replacing the selection in select…

877ae2c

… on focus mode

fix lint

3bbe205

Merge branch 'main' into 1905-selectonfocus-updates

83a514c

LFDanLu reviewed Jul 1, 2021

View reviewed changes

snowystinger added 3 commits July 21, 2021 15:40

Touch multiselect always use toggle (#2046)

b78e0bb

* Mobile updates for selection * Move mobile awareness to the component * fix lint * move to touch/vo detection

Merge branch 'main' into 1905-selectonfocus-updates

15a7e9f

Select on initial focus (#2026)

1065847

* Select on focus first time in collection * fix lint * Only start selecting on first focus if selectOnFocus is on * add a test * fix aria * fix lint * remove dead code * fix lint

fix lint

e5893bb

matthewdeutsch mentioned this pull request Sep 1, 2021

ListView CSS updates #2266

Closed

devongovett mentioned this pull request Sep 21, 2021

Add support for highlight selection and onAction to TableView and ListView #2363

Merged

3 tasks

dannify closed this in #2363 Oct 15, 2021

dannify deleted the 1905-selectonfocus-updates branch November 30, 2025 23:42

Selection Behavior 'replace' #2013

Selection Behavior 'replace' #2013

Uh oh!

Conversation

snowystinger commented Jun 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

adobe-bot commented Jun 14, 2021

Uh oh!

adobe-bot commented Jun 14, 2021

Uh oh!

adobe-bot commented Jun 15, 2021

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

adobe-bot commented Jun 15, 2021

Uh oh!

adobe-bot commented Jun 21, 2021

Uh oh!

adobe-bot commented Jun 23, 2021

Uh oh!

adobe-bot commented Jun 23, 2021

Uh oh!

LFDanLu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devongovett commented Jul 21, 2021

Uh oh!

adobe-bot commented Jul 21, 2021

Uh oh!

adobe-bot commented Jul 21, 2021

Uh oh!

adobe-bot commented Jul 22, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

snowystinger commented Jun 11, 2021 •

edited

Loading