Input elements lose their value while being dragged

[MarshallOfSound]

If the template element has an input element when it is dragged the value is lost and brought back again when the drag is released. As far as I can tell this is due to how the reorder component renders a new "template" element for each drag.

[JakeSidSmith]

Are you storing the element's value in state / your store?

[MarshallOfSound]

@JakeSidSmith Not currently it was not required for the component I was writing. I would only fetch the value on submit through a this.refs on the parent element.

Is there anyway that non state related values can be restored to the temporary "dragging" element. Like offer up "dragstart" and "dragend" methods so that we could possible handle these things ourselves without having to store all input values in state.

[JakeSidSmith]

Ideally you should be storing your values in some kind of store, but I'm not certain that would fix the issue.

I'm a little surprised this is a problem, I don't see why the value would be lost, but I'll take a look and see if I can fix it. :)

[MarshallOfSound]

I managed to get it working using a super hacky properties trick. I setup a bunch of function to store the value in the parent state and pass the value in as an attribute on the "item" object. But it is super hacky and it would be better if I didn't have to do it 👍

[JakeSidSmith]

Hey, @MarshallOfSound have had a play around and came up with this: #64

Could you give it a test on your project? Should solve the issue. :)

Also fixes a few other potential issues.

[MarshallOfSound]

@JakeSidSmith It appears to now keep the input value while being dragged 👍

But now when dragging it doesn't appear to actually reorder the elements. It visually reorders while dragging, but when you release everything reverts.

[JakeSidSmith]

Ah crap. Was working OK for me. Are you using the indices to reorder components yourself, or the reordered list that is provided in the callback?

[MarshallOfSound]

Neither? Before when I dragged and dropped this utility reordered the components for me. Now it does not?

[JakeSidSmith]

Ah yeah, it mutated the list you passed in, which I realised was a bad idea. Now you've gotta use some of the arguments in the callback. :) The last one is the new list. See the readme.

[MarshallOfSound]

Hmmm, interesting. So all I have to do is hold the list in my state and setState in the callback. I actually like that more 👍

Gimme a sec to test 😄

[MarshallOfSound]

Yep, that branch fixes the input value issue 👍

Thanks for the quick response 😸

[MarshallOfSound]

Worth pointing out though that this fix would be a breaking change for people not handling the callback like me and just letting the mutation happen 😢

[JakeSidSmith]

Yeah, I guess I'll make some other improvements and release a new major version. There's a few thing to clean up anyway. :)

[JakeSidSmith]

@MarshallOfSound Was #66 a sufficient fix for you? Would like to get it merged & close this issue if possible. :)

[JakeSidSmith]

Update: just released 3.0.0-alpha.0 on npm. I'd suggest checking out this version, it should be far more stable than the existing release, fixes a lot of bugs, and adds the ability to drag between lists. :)

See the readme after installation, there's been a considerable change to the interface.

This issue is fixed for single lists in the version 3 alpha.

[JakeSidSmith]

Closing due to lack of response.