How to use fieldArray with @dnd-kit's useSortable?

[elieven]

Does anyone have an idea how to correctly use @dnd-kit's useSortable with react-hook-form's useFieldArray? I've been losing my mind for two days now trying to get it to transition correctly even with using a separate list of items for visual use only and updating / syncing the hookform state later and i'm stumped. At this point I'd gladly pay money for someone to help but finding anyone at all that knows this is well... not going well. I've posted a question on stackoverflow with an accompanying codesandbox.

The @dnd-kit docs are as lacking in this area as is the library in itself great. As react-hook-form has become the de facto form library for react it would be awesome to see some working examples / docs of integration with a DnD library that is not dead (beautiful-dnd). Even better is the example code is under 300 LOC (seriously the basic storybook story component that all of their sortable examples use is 300+LOC and it uses 3 other components some of which are also long af).

[leapful]

@elieven

You can use directly move method from useFieldArray hook to change position index of field array item after drag end.

Working demo: https://codesandbox.io/s/rhf-dndkit-bs-forked-65dlr6?file=/src/App.tsx

[mfs9408]

A glass of wine for this gentleman!

[ashishsurya]

I am using useFieldArray for a field which is of type array and each one may contain different number of fields and each field in each of the item can have different validations.

Can we use useFieldArray here?

[EliasYoc]

I was working on this TanStack Table library and thought the problem was there, but thanks to this issue I realized the problem was actually the reset from useFieldArray. I replaced reset with move, and it worked.