React-select: Drag to reorder

[wmertens]

Would be very nice to have. The Angular UI-Select has it :grin: https://github.com/angular-ui/ui-select/blob/6e81746d31cb8e5fda8f6b9eed066d9a2e6ba4c1/src/uiSelectSortDirective.js

[atran]

+1

[JedWatson]

Keen. Will need some time to get around to adding it, PRs welcome.

[bkniffler]

+1

[sriprabha]

+1

[solognt]

+1

[solognt]

I created a little fiddle based on the react-select html and the html5 sortable by RubaXa (https://github.com/RubaXa/Sortable).

https://jsfiddle.net/oqjqgbpb/6/

On sort end it gives me the old and new index of the element so I can update the collection and re-render the selector.

This seems to work fine on the html alone but when I use it directly on the react-select element drag/drop does not work any-more. I seems the selector blocks the necessary events somewhere.

Any pointers would be welcome..

[dcworldwide]

Hi @solognt, i'm looking to solve this problem as well. Any progress? Happy to review your work / collaborate.

[sumitk]

+1any more updates?

[rich-b]

i've been thinking about implementing this using react-dnd. Sound good?

[bkniffler]

Introducing a dependency for such a small feature seems overkill, especially since native html5 dnd isn't hard to implement, and might even be easier in this specific case.

[turnerniles]

+1

[bvaughn]

@rich-b: i've been thinking about implementing this using react-dnd. Sound good?

I'd also suggest checking out react-sortable-hoc. It's really slick.

IMO this functionality (drag-and-drop re-ordering) is a bit more complicate than belongs in the base react-select library. (This library is primarily owned and maintained by Jed- an individual. It doesn't have a full team behind it like angular-ui. So limiting the scope and ambition of this project will help keep it easier for him to maintain.)

I believe this functionality should already be possible by supplying a custom menuRenderer and using react-sortable-hoc inside of it.

[krzysu]

I managed to integrate react-dnd with react-select without any changes to latter one. Gist is here. Let me know what do you think!

[davidworkman9]

@krzysu Did you try that on the 1.0 branch? It doesn't seem to work for me.

[krzysu]

@davidworkman9 no, I didn't, I haven't touched it since my last post. I have no idea about changes in 1.0 branch, you need to figure it out by yourself, sorry :)

[davidworkman9]

Thanks, just checking as the 1.0 branch was out in October. I was able to get it to work by adding onValueClick={() => {}} to the props to react-select.

[songyanho]

1720

[aschmoe]

@bvaughn I had the same thought re: react-sortable-hoc, here's a gist. I pulled out mobx code, so possible it doesn't work out of the box.

The only real hacky bit was extracting the index in valueComponent, so if that prop was to come through to the supplied component, vanilla react-sortable-hoc components would be a go.

[bvaughn]

Adding a new prop, index, to valueComponent seems reasonable to me. Put together a PR?

[pwhipp]

I added the index property and also added an example with the sortable-hoc included in this fork. Happy to create a PR if it is wanted.

However, adding the index property is a somewhat arbitrary thing from the perspective of react-select and the working example has some issues such as when the ordering extends over multiple lines or with the styling of the element being dragged.

[byc1990]

+1

[tadaskay]

Perhaps this could be a good candidate for v2?

[poulet42]

@tadaskay It's still possible to implement sortable values in v2 (even without valueRenderer and exposed index) without making a change to react-select.

[tadaskay]

@poulet42 Could you elaborate? Do you mean by integrating with react-dnd?

[dude-awesome]

would be awesome to see dnd working with multiselect

[wmertens]

People leaving +1: you're not helping. Use the emojis for the issue text, or create a pr. Never leave +1 anywhere on github, that's so 2012.

[jossmac]

This should now be achievable using the components API in v2.

Would love to see some links to working examples here if anyone builds it 🙂

[nickstrak]

Anyone with a working example using components API in v2 as @jossmac suggested? 🙂

[mbonaci]

Versions below 3.0.8 have problems with hiding MultiValues after dragging, because the index prop (which is mandatory for react-sortable-hoc's SortableElement) was added to MultiValue in that version.