ListView: Draggable Rows #2593

reidbarber · 2021-11-24T00:12:26Z

Closes #2495

Notes:

Includes a DragHandle icon because the one in @spectrum-icons/workflow is outdated. We can use that once it is updated.
custom render preview is not supported yet

Known issues:

~~clicking to drag an item will toggle selection~~
~~clicking on the action menu button doesn't open the menu~~
It is a bit weird that some items select on mouse down and some on mouse up. I think if dnd is enabled for the list, we should make all items select on mouse up, not just for items that are draggable.
Mouse down on drag indicator shows a focus ring. Sometimes it is the default browser one, and other times it is ours. We should get rid of the default browser one, and also find out why ours sometimes shows.
Focus ring on drag indicator doesn't hide after pressing enter to initiate a drag. Makes it look like it's still focused.
Note to people testing: performing a drop via screenreader doesn't quite work (at least in TalkBack double tapping doesn't actually drop the items), seems to be something non-specific to ListView so out of scope for this PR.
Additionally it seems like the drop operation on mobile doesn't quite recognize multiple item drops the same way like it does in desktop, something to do with writeToDataTransfer from what I can tell. onDrop will have the proper number of items in onDrop's items when performed on desktop but only have one item when performed on mobile (and seemingly combines all the items together instead)? (ANDROID specific?)
weirdness with focus when using enter to begin dragging and after dropping: see ListView: Draggable Rows #2593 (comment)

✅ 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:

Test draggable stories at ListView -> Draggable Rows:

Dragging should not work if the drag operation starts on an intractable element within row.
Row c, e, and m are non-draggable. Row f is disabled and is thus non-draggable
Test mouse dragging
Test keyboard dragging (tab to drag handle)

🧢 Your Project:

RSP

adobe-bot · 2021-11-24T00:19:51Z

Build successful! 🎉

adobe-bot · 2021-11-24T16:13:17Z

Build successful! 🎉

packages/@react-spectrum/list/src/ListViewItem.tsx

adobe-bot · 2022-02-25T23:17:07Z

Build successful! 🎉

This reverts commit 4438f2b.

adobe-bot · 2022-02-25T23:38:48Z

Build successful! 🎉

packages/@react-spectrum/dnd/src/useDragHooks.ts

…istView-DnD

adobe-bot · 2022-02-26T00:22:30Z

Build successful! 🎉

adobe-bot · 2022-02-26T00:22:36Z

Build successful! 🎉

adobe-bot · 2022-02-26T01:23:26Z

Build successful! 🎉

we only import types from these packages so put them as dev deps

adobe-bot · 2022-02-26T01:55:28Z

Build successful! 🎉

devongovett · 2022-02-28T16:18:27Z

packages/@react-types/shared/src/dnd.d.ts

@@ -143,7 +143,8 @@ export interface DraggableCollectionProps {
  onDragStart?: (e: DraggableCollectionStartEvent) => void,
  onDragMove?: (e: DraggableCollectionMoveEvent) => void,
  onDragEnd?: (e: DraggableCollectionEndEvent) => void,
-  getItems: (keys: Set<Key>) => DragItem[],
+  getItems?: (keys: Set<Key>) => DragItem[],


nit: this should not be optional

Suggested change

getItems?: (keys: Set<Key>) => DragItem[],

getItems: (keys: Set<Key>) => DragItem[],

devongovett

Other than one small nit above, looks good!

adobe-bot · 2022-02-28T16:55:15Z

Build successful! 🎉

snowystinger

I'm happy to discuss and dismiss. Does the order of events seem a little strange? (Read bottom up like a console output)

dragEnd
onDrop
onDropExit
onDropActivate
onDropEnter
dragStart

I think I'd have expected

dragEnd
onDropExit
onDrop
onDropActivate
onDropEnter
dragStart

Though I may just not know enough about dnd native event orders.

Why can't I drag and drop two items into the textfield in https://reactspectrum.blob.core.windows.net/reactspectrum/99a6ff0791b2b98ae068feec9892fe871aaf14c3/storybook/index.html?path=/story/listview--draggable-rows I have to delete the contents before I can do it again with another item and sometimes it shows a focus ring when I drag something over it?

I can get stuck in drag and drop mode pretty easily if I try to use the mouse, should using the mouse cancel the dnd mode? I also can't get to the textfield using the keyboard to drop it on that.

Focus ring on safari is a bit janky

Otherwise, working with mouse/keyboard on Chrome and Safari

reidbarber and others added 20 commits November 11, 2021 12:18

initial setup

80e8863

updating ListView types and improving defaults for drag state

fc59801

adding ListView drag story and supporting individual row drag disabling

27ad57f

fixing ListViewItem outdated selection maanger

617145d

fixing disabling individual rows in drag and drop

772ac53

add drag handle UI

c08a0dc

cleanup formatting

138247c

fix list item padding

0da64d9

improve drag handle focus ring

bded88c

initial render preview styles

a62be4d

improve render preview styles

80a689a

fix render preview border radius

8d7a067

fix logic to show handle

92f7a95

add support for custom dragIcon

c584521

fix lint

1c117fe

only drop draggable items if multiple selected

d1044cb

fix drag handle styles

9d1e854

add border radius to drag handle

76907f4

add isDraggable to item type

008cfc3

skip failing draggable tests for now

a45f340

reidbarber requested review from dannify, devongovett and snowystinger as code owners November 24, 2021 00:12

reidbarber changed the title ~~ListView: Draggable Rows~~ [WIP] ListView: Draggable Rows Nov 24, 2021

Merge branch 'main' into ListView-DnD

2f630e1

devongovett reviewed Nov 29, 2021

View reviewed changes

packages/@react-spectrum/list/src/ListViewItem.tsx Show resolved Hide resolved

prevent selection when clicking draggable row

d63382a

reidbarber mentioned this pull request Nov 30, 2021

Firefox: Checkbox + label undraggable when nested in draggable row #2613

Closed

fix circular dep

706debd

reidbarber added 2 commits February 25, 2022 17:33

fix react-aria/dnd dep in listview

4438f2b

Revert "fix react-aria/dnd dep in listview"

e9c7596

This reverts commit 4438f2b.

devongovett reviewed Feb 26, 2022

View reviewed changes

packages/@react-spectrum/dnd/src/useDragHooks.ts Show resolved Hide resolved

reidbarber added 3 commits February 25, 2022 18:16

fix DragHooks type

59d2b11

Merge branch 'main' into ListView-DnD

75967d2

Merge branch 'ListView-DnD' of github.com:adobe/react-spectrum into L…

de099f2

…istView-DnD

LFDanLu added the needs testing label Feb 26, 2022

making aria/stately dnd packages dev deps for list

d36779c

we only import types from these packages so put them as dev deps

LFDanLu force-pushed the ListView-DnD branch from 6febfda to d36779c Compare February 26, 2022 01:50

devongovett reviewed Feb 28, 2022

View reviewed changes

devongovett previously approved these changes Feb 28, 2022

View reviewed changes

make getItems required

ec9f91f

reidbarber dismissed devongovett’s stale review via ec9f91f February 28, 2022 16:30

fix type of dragHooks props

99a6ff0

snowystinger approved these changes Feb 28, 2022

View reviewed changes

devongovett merged commit 3dc96e5 into main Feb 28, 2022

devongovett deleted the ListView-DnD branch February 28, 2022 20:30

dannify added release and removed needs testing release labels Mar 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ListView: Draggable Rows #2593

ListView: Draggable Rows #2593

Uh oh!

reidbarber commented Nov 24, 2021 •

edited

Loading

Uh oh!

adobe-bot commented Nov 24, 2021

Uh oh!

adobe-bot commented Nov 24, 2021

Uh oh!

Uh oh!

adobe-bot commented Feb 25, 2022

Uh oh!

adobe-bot commented Feb 25, 2022

Uh oh!

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

devongovett Feb 28, 2022 •

edited

Loading

Uh oh!

devongovett left a comment

Uh oh!

adobe-bot commented Feb 28, 2022

Uh oh!

snowystinger left a comment

Uh oh!

Uh oh!

	getItems?: (keys: Set<Key>) => DragItem[],
	getItems: (keys: Set<Key>) => DragItem[],

ListView: Draggable Rows #2593

ListView: Draggable Rows #2593

Uh oh!

Conversation

reidbarber commented Nov 24, 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 Nov 24, 2021

Uh oh!

adobe-bot commented Nov 24, 2021

Uh oh!

Uh oh!

adobe-bot commented Feb 25, 2022

Uh oh!

adobe-bot commented Feb 25, 2022

Uh oh!

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

adobe-bot commented Feb 26, 2022

Uh oh!

devongovett Feb 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

devongovett left a comment

Choose a reason for hiding this comment

Uh oh!

adobe-bot commented Feb 28, 2022

Uh oh!

snowystinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

reidbarber commented Nov 24, 2021 •

edited

Loading

devongovett Feb 28, 2022 •

edited

Loading