[RFC] Add arrows to reorder items in arrays

[ibobo]

At this moment, moving an item of an array, <ArrayInput /> or <ReferenceArrayInput />, requires removing all elements up to the position of the first between source or destination, and re-inserting all of them in the new order. This is not the best user experience, and some of the users of the projects I worked on are complaining about this.

The solution that I'm proposing, and I can implement it, is adding two small arrows next to the array index to move items up or down one spot.

I also considered adding drag and drop operation, but I don't know how this would interfere with other inputs, so I'm sticking to the arrows solution.

I will use the arrows from the DualListInput rotated by 90 degrees to maintain the react-admin style.

Thanks!

[fzaninotto]

Hi, and thanks for your suggestion.

I think you've identified two enhancements:

• for <ArrayInput> (which uses a <SimpleFormIterator>). It makes sense to add arrows in each row in <SimpleFormIterator>.
• for <ReferenceArrayInput> (which takes a SelectArrayInput or AutocompleteArrayInput as child). It doesn't make sense to allow ordering in SelectArrayInput. It's possible to enable drag and drop of selected items in <AutocompleteArrayInput>.

Feel free to open a PR with your proposed changes, we'll discuss the UI & implementaion there.

[audunhalland]

Would love this feature! Doesn't need to be anything fancy like drag'n'drop. An arrow/button based solution would work quite fine.

[fzaninotto]

Fixed by #6433