[Bug]: Remove nested useFieldArray field always removes the last field

[franciscohanna92]

Which packages are impacted?

remix-validated-form ^4.6.9

Reproduction

https://codesandbox.io/p/sandbox/gallant-monad-3oj8wb

Steps to Reproduce

1. Go to the reproduction sandbox
2. Try removing a "song" field.
3. Always the last "song" field gets removed.

Expected behavior

As a user, I expected the correct song field to be removed.

Platform

• OS: macOS
• Browser: Chrome
• Version: 110.0.5481.177

[airjp73]

I think this is caused by the fact that all the inputs are uncontrolled and you're using the indexes as key props. You can fix the issue by making sure the key on the notes is the id of each note rather than the index.

But it's weird because sometimes indexes as keys works just fine and other times it doesn't. I wonder if there's a way we can make this easier to manage by auto-generating a key prop or something.

[franciscohanna92]

Thanks for your help @airjp73!

It's definetly odd that map indexes sometimes work and sometimes don't. Auto-generating an id to be used as key is exactly what react-hook-form does for field arrays (see this line), although the API is somewhat different.