search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.69k stars 1.09k forks source link

Follow up to selectOnFocus + multiple selection changes in useSelectableCollection #1905

Closed LFDanLu closed 2 years ago

LFDanLu commented 3 years ago

🐛 Bug Report

Followup work after https://github.com/adobe/react-spectrum/pull/1843 is merged/added:

🧢 Your Company/Team

RSP

🕷 Tracking Issue (optional)

dannify commented 3 years ago

Needed for highlight functionality in components such as TableView

snowystinger commented 3 years ago

With selectOnFocus I can tab into the list, but it won't select the item, shift+down arrow then selects "Cut" but "Copy" is left unselected. In order to select it, I'd need to tab in, then down arrow, then up arrow, then shift down arrow

The way that native works is that you first tab stop on the whole list, then arrow down into it, do we want this behavior too?

clicking on a selected item (single selection) doesn't unselect the item

I can't reproduce this without disallowEmpty. And of course with disallowEmpty it makes perfect sense.

for multiselect w/ selectOnFocus: clicking on a unselected item w/o shift doesn't unselect previously selected items

Addition: Table is gaining a new prop, selectionBehavior: 'toggle' | 'replace', so need to add this. I've split this out into https://github.com/adobe/react-spectrum/issues/2018

how to support multiselect on mobile? no modifier keys so do we switch modes away from selectOnFocus=true?

This seems bigger than the rest, I'll get to it if there is time

majornista commented 3 years ago

With these new selection modes, there does not appear to be a way to select/deselect multiple non-contiguous items.

I tend to agree with the sentiment expressed in this Twitter thread: https://twitter.com/codingchaos/status/1383583716623065089

Also selection following focus is a pretty shitty pattern in general.

“Oh, you selected some items and want to keep them? WELL TOO BAD, SHOULDN’T HAVE USED THE ARROW KEY, THEN”

Why do we have to reproduce UI choices that OSX made twenty years ago, if they suck and exclude keyboard-only users from certain tasks?

Windows 10's File Explorer uses Ctrl+Alt+ArrowUp/ArrowDown to allow a user to navigate between items in the Explorer without losing selection.

snowystinger commented 3 years ago

I assume you're only talking about selectOnFocus. Ctrl+Alt+Up seems reasonable, but I can't tell if that's what you're recommending doing or if you're upset with Windows as well. One thing to keep in mind is that currently on key down in useSelectableCollection, having the alt key down is automatic ignore event, I can obviously change that to be (e.altKey && !e.ctrlKey), but just want to make sure there isn't an unintended use case that I'm not thinking about. https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/selection/src/useSelectableCollection.ts#L110