react-hook-form: [v6] - watch returns defaultValue after moving an item in a fieldArray

I still need to figure out if by hiding the elements with css is going to work or if it could potentially be a performance issue. What are your thoughts on that?

I think CSS is the cheapest 😃 by the way, still going to merge that PR anyhow, it’s an improvement for the lib.

I don’t know If I can reproduce it using the simpler codesanbox that’s why I created the other one. But I will try to. With this https://codesandbox.io/s/react-hook-form-usefieldarray-6e0bl?file=/src/index.js, you can reproduce it by doing

1. Append 2 items
2. Click on the 1 one. Enter some text and select a value from the dropdown
3. Click on the 2 item. Enter some text and select a value from the dropdown
4. Click on move
5. Now click on the 2 item (1 before moving). You should see that the drawdown has no value

EDIT: I just updated it. Instead of using a select I used 2 inputs. The issue and the steps to reproduce it are the same

it does! and actually my example does also work when I use useWatch({ name: `test[${index}].name`, control }); instead of useWatch({ name: 'test', control }); and then access the value by index. I thought I tried that before with watch but I don’t remember it working. Interesting. I’m glad is working and that we made some progress 😁

I still need to figure out if by hiding the elements with css is going to work or if it could potentially be a performance issue. What are your thoughts on that?

Anyway, thanks @bluebill1049 for the help, for the quick response as always and for the amazing library!

@bluebill1049 no worries, we are completely in the opposite TZ, I’m bout to 😴

so the InnerForm actually doesn’t really get unmounted, only when there is no selected item. But when you click on every item what I’m actually doing is changing the keys of the inputs and the reason I do that is to be able to refresh the values, otherwise the input won’t update it’s value

Took a quick look, I think this problem is due to your component is getting unmounted, so in my PR fix, I am reading what’s the in the form and try to pass down to the fields, in your case, because the inputs share between different section, which leads to inputs are unmounted and get form values to return only the presenter one.

I don’t know If I can reproduce it using the simpler codesanbox that’s why I created the other one. But I will try to. With this https://codesandbox.io/s/react-hook-form-usefieldarray-6e0bl?file=/src/index.js, you can reproduce it by doing

1. Append 2 items
2. Click on the 1 one. Enter some text and select a value from the dropdown
3. Click on the 2 item. Enter some text and select a value from the dropdown
4. Click on move
5. Now click on the 2 item (1 before moving). You should see that the drawdown has no value

EDIT: I just updated it. Instead of using a select I used 2 inputs. The issue and the steps to reproduce it are the same

Nice, thanks i will take a look tonight.

Thanks will take a look at it.

I tried to come up with an example as close as to what I have. So to reproduce the issue I’m having the steps are

1. Append a new item
2. Click on the recently appended item
3. Put some value in the input
4. Append 4 items more and repeat 2 & 3
5. Click on move.

https://codesandbox.io/s/react-hook-form-usefieldarray-qmyp1?file=/src/index.js

EDIT: An easy way to fix that error would b to map over the fields and generate the same output as I’m expecting. I didn’t do that only because I wanted to make sure there was no other way to solve it even tho, doing that you can still see some flickering