Ease droppable orientation restrictions #1907
Open
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.
The problem
As documented in #1906, a draggable currently cannot be moved by keyboard to another droppable if the droppables are oriented in the same direction as the draggables).
Internally, this was related to the behavior in
src/state/move-in-direction/index.js
wheremoveToNextPlace()
(move internally) would be called if the arrow key is in the same axis as the draggable'sdirection
(isMovingOnMainAxis === true
), andmoveCrossAxis()
(which allows movement between droppables) would be called if the arrow key is on the other axis (isMovingOnMainAxis === false
).The problem here (and it is clear from the function name
moveCrossAxis
) is that it pre-supposes that droppables must be oriented along the cross axis to the main axis that the draggables are oriented along. This is overly restrictive, especially when we consider vertical lists where the number of draggables and droppables are both dynamic and it is unrealistic to place droppables horizontally side-by-side without undesirable horizontal scrolling.What I've done
I have naively renamed
moveCrossAxis
tomoveAxis
(this involved renaming a directory). It is now also being called whenisMovingOnMainAxis === true
ifmoveToNextPlace
yielded a null result (i.e. there was no internal position that the draggable could be moved to, which should indicate that the first/last position within the droppable has been reached and the user is trying to reach another droppable).I have added the
isMovingOnMainAxis
boolean as an option formoveAxis
, and it is being passed togetBestAxisDroppable
(formerlygetBestCrossAxisDroppable
) where the majority of the changes have been made (to support both axes).As this represents a change in functionality (purely additive in my opinion), I have updated the docs as well.
Note
I have not added any unit tests for this for this new functionality. As I do not expect this PR to be approved and merged in its current form, I thought I should wait before adding any so as not to waste time.