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

@@ -93,6 +93,7 @@ export const Form: React.FC<FormProps> = (props) => {
   const [submitted, setSubmitted] = useState(false)
   const formRef = useRef<HTMLFormElement>(null)
   const contextRef = useRef({} as FormContextType)
+  const lastChangeRef = useRef<number>(0)
 
   const fieldsReducer = useReducer(fieldReducer, {}, () => initialState)
 
@@ -607,11 +608,18 @@ export const Form: React.FC<FormProps> = (props) => {
         if (Array.isArray(onChange)) {
           let revalidatedFormState: FormState = contextRef.current.fields
 
+          const changeStartTime = new Date().getTime()
+          lastChangeRef.current = changeStartTime
+
           for (const onChangeFn of onChange) {
             revalidatedFormState = await onChangeFn({
               formState: revalidatedFormState,
             })
           }
+          // NOTE: to prevent race conditions, only replace state from server when no newer change has been executed
+          if (lastChangeRef.current !== changeStartTime) {
+            return
+          }
 
           const { changed, newState } = mergeServerFormState(
             contextRef.current.fields || {},