move and swap break form inputs

[carlhueffmeier]

Are you submitting a bug report or a feature request?

I believe I found a bug.

What is the current behavior?

These are the steps to reproduce:

1. Create two input fields
2. Swap them
3. Type into the first input field
4. The typed character will not appear in the first input field, but in the second

What is the expected behavior?

Swapping or moving fields should preserve behavior.

Sandbox Link

To keep things as simple as possible, I reused the sandbox from the issue referenced below, simply upgrading the library version to 1.1.0.

What's your environment?

The problem occurs with final-form-arrays version 1.1.0. Downgrading the package to 1.0.6 solves the problem.

Other information

I believe the problem is caused by the latest change to the move and swap code in response to this previous issue.

This commit looks especially suspicious.

I would be happy to work on it, if you give me some pointers on where to start 💪

[maciejmyslinski]

Yeah, I believe you've found a bug, indeed. I'll write a test case for it.

[carlhueffmeier]

That would be great! I could look into it this weekend.

[tlenclos]

Hey guys, any news on this or some lead ? I can't implement a drag&drop sorting sadly due to this bug.

[carlhueffmeier]

Sadly, nothing to report yet!
For now, I would recommend downgrading final-form-arrays to the previous version.
To do that, specify the version in your package.json like so:

  "dependencies": {
    ...
    "final-form-arrays": "^1.0.4",
    ...
  }

[tlenclos]

If I do this I got the old bug, code it's quite complicated to get into :(

[tlenclos]

I had to move my form to https://github.com/jaredpalmer/formik, re-ordering is working but now we are facing performance issues.
react-final-form has just this bug preventing us from using it.

[maciejmyslinski]

I'm sorry to hear that @tlenclos 😢
I was quite busy speaking publicly recently. I'm back on it.

[maciejmyslinski]

I wrote tests for final-form-arrays and it works correctly. Maybe the error is somewhere in react-final-form-arrays 🤔
I'll try to investigate more next week.

[maciejmyslinski]

ok, I upgraded all dependencies in the codesandbox and the behavior is still buggy but slightly different. https://codesandbox.io/s/qkl20opx4w

Downgrading final-form-arrays to 1.0.4 fixes this bug so it has to be something connected with this lib 😕

[carlhueffmeier]

Thank you so much for looking into it Maciej! 🙏

After reading your message I had a glance at the code again and believe I have identified the issue 🙌
The problem seems to be that in addition to the field state, we are also copying over the functions stored inside the field state. (change, blur, focus)
I will explore the issue further and make a PR once I feel confident it's fixed.

I have to admit, I was a little bit reluctant to dive into the code because debugging the issue is so involved. I ended up building the package withnps and copying the dist directory into my test repos node_modules folder.
Certainly not the ideal integration testing workflow 😅

Any hints on how to facilitate development?

[maciejmyslinski]

@carlhueffmeier thanks! This library lacks integration tests with others from the ecosystem. I'll write such integration tests soon because it's not the first time a similar issue happens.

[erikras]

Published fix in v1.1.1.