fix(ui): prevent race conditions after move row by only replacing state for the latest change

Author: dpnolte

Diff for: packages/ui/src/forms/Form/index.tsx

@@ -605,13 +605,20 @@ export const Form: React.FC<FormProps> = (props) => {
     () => {
       const executeOnChange = async () => {
         if (Array.isArray(onChange)) {
-          let revalidatedFormState: FormState = contextRef.current.fields
+          const stateAtStartOfChange: FormState = contextRef.current.fields
+          let revalidatedFormState = stateAtStartOfChange
 
           for (const onChangeFn of onChange) {
             revalidatedFormState = await onChangeFn({
               formState: revalidatedFormState,
             })
           }
+          // NOTE: to prevent race conditions, only replace state with the derived state from the server
+          // if the form state has not changed since the start of executeOnChange.
+          // Otherwise newer state data will be overwritten by the REPLACE_STATE dispatch.
+          if (contextRef.current.fields !== stateAtStartOfChange) {
+            return
+          }
 
           const { changed, newState } = mergeServerFormState(
             contextRef.current.fields || {},