useFieldArray move + submitting form causes nested children arrays to be added to the wrong parent

[ashleyxue529]

Version Number

7.47.0

Codesandbox/Expo snack

N/A

Steps to reproduce

I don't have a code example at the moment, will try to put one together if I have time. But in the meantime, here is my setup, the steps I take to repro, and some screenshots.

Setup:

• react hook form
• relay/graphql to query the default values used in useForm
• i'm using a 3 layer nested array to represent menu items + sub items
• i'm also using pangea-dnd (react-beautiful-dnd) to enable dragging and dropping within each menu section

Issue

Dragging and dropping using move causes the children of one top level element to be copied over to the other. It seems to weirdly depend on how quickly I move the items around or how quickly I click Submit.

This is the starting state. I'll be referencing each top level item with their index.

• '3' starts at index 0
• '1' starts at index 1
• '2' starts at index 3

Steps to repro:

• Quickly drag and drop '3' from index 0 to 1 (uses move in code)
• Quickly drag and drop '3' from index 1 to 2 (uses move in code)
• quickly hit Submit. on successful submit, I reset the form to use the current form state.

 <form
      onSubmit={handleSubmit((data) => {
        saveMutation({
          variables: {
            input: {
              menuItemsInput: convertFromLocal(data.items),
            },
          },
          onCompleted: (d, errors) => {
            if (!errors) {
              reset(data);
            }
          },
        });
      })}

Incorrect result:

Expected behaviour

Similar steps, but no repro:

• Slowly drag and drop '3' from index 0 to 1 (uses move in code)
• Slowly drag and drop '3' from index 1 to 2 (uses move in code)
• wait a bit then hit Submit. it works fine

OR

• Drag and drop '3' directly from 0 to 2, it works fine

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[ashleyxue529]

After too long of a time debugging, I ended up fixing (hopefully) this edge case by adding flushSync around move.

I'm guessing that there's some state mismatch when you try to drag too quickly after the first onDragEnd since state updates are batched. Forcing state update with flushSync will ensure that the initial field state is correct before starting the next drag update. My other guess is that because this nested component is so heavy + maybe the validation on top of it just makes this state update extra slow? I tried reproing this issue with a very stripped down version of my code and couldn't repro it.

Though it still would help if someone provide more context around how move is implemented and how it might be interacting with drag and drop to cause this? Just hoping for more info rather than guessing on my end 😅

Code for context in case anyone runs into this in the future:

 <DragDropContext
        onDragEnd={(result) => {
          const { destination, source } = result;

          if (!destination) {
            return;
          }

          if (
            destination.droppableId !== source.droppableId &&
            destination.index === source.index
          ) {
            return;
          }

          if (result.type === "PARENT") {
            flushSync(() => move(source.index, destination.index));
          } else {
             ...
          }
        }}
      >
...

[wenfw]

useFieldArray({
  name,
  shouldUnregister: false,
  rules,
});

set shouldUnregister to false resolve the issue for me.