Draggable horizontal list

[ritz078]

I have created a horizontal list and was able to successfully use Right and Left arrow keys to navigate using keyboardDelegate. I am not able to do the same for the drop indicator. It only works with Up/Down arrow keys. Any idea how I can achieve that ? I am using https://react-spectrum.adobe.com/react-aria/useDroppableCollection.html#reordering as the base implementation

Kapture.2023-05-10.at.22.13.18.mp4

[LFDanLu]

Unfortunately, useDroppableCollection doesn't support ArrowLeft/Right at the moment, only ArrowUp/Down are covered here:

react-spectrum/packages/@react-aria/dnd/src/useDroppableCollection.ts

Lines 538 to 555 in 98cad3f

	onKeyDown(e, drag) {
	let {keyboardDelegate} = localState.props;
	let types = getTypes(drag.items);
	switch (e.key) {
	case 'ArrowDown': {
	if (keyboardDelegate.getKeyBelow) {
	let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getNextTarget);
	localState.state.setTarget(target);
	}
	break;
	}
	case 'ArrowUp': {
	if (keyboardDelegate.getKeyAbove) {
	let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, getPreviousTarget);
	localState.state.setTarget(target);
	}
	break;
	}

. You would either need to extend the onKeyDown handling there to work with ArrowLeft/Right by default, add a option to customize that keydown behavior at the user's discretion (provide a keydown and chain it?), or implement your own hook that does something similar to useDroppableCollection but only accepts ArrowLeft/Right instead I'd imagine

[ritz078]

Great. I am sure I can come up with something based on your suggestions. Thank you.

[devongovett]

#4669 should add the necessary support for dnd in horizontally oriented lists.