Fix #176: Await async validate to prevent Promise as ARRAY_ERROR (#193)

* Fix #176: Await async validate to prevent Promise as ARRAY_ERROR

Fixes #176

## Problem
When FieldArray's validate prop was an async function, the unresolved
Promise was being set as ARRAY_ERROR instead of waiting for it to resolve.

This caused:
- Promise objects stored in form errors
- Form appearing invalid even when validation passed
- Unable to check for actual errors vs pending validations

## Root Cause
The validate wrapper in useFieldArray.ts was not async, so when
validateProp returned a Promise, the code checked the Promise object
itself (not undefined/array), wrapped it in an array, and set it as
ARRAY_ERROR.

## Solution
Made the validate function async and await Promise.resolve() before
checking error type:

```typescript
// Before
const error = validateProp(value, allValues, meta)

// After
const error = await Promise.resolve(validateProp(value, allValues, meta))
```

Promise.resolve() handles both sync and async validators correctly:
- Sync validators: returns value immediately
- Async validators: awaits the promise

## Tests
Added useFieldArray.async-validate-176.test.tsx with regression tests:
- ✅ Async validator resolving to undefined (no error)
- ✅ Async validator resolving to error string
- ✅ Verifies Promise is NOT stored as ARRAY_ERROR

## Credit
Solution provided by issue reporter in #176 comments.

cc @erikras

* Fix: Split async/sync validate tests to avoid useConstant issue

The original test tried to switch validators via rerender, but useConstant
locks the validator on first render. Split into two independent tests.

* Fix: Handle both sync and async validators correctly

The previous implementation wrapped all validators in async/await, which
caused synchronous validators to return Promises. This broke timing in
tests and potentially in production code that expected immediate results.

Now we check if the validator result is a Promise before awaiting it:
- Async validators (return Promise): await and process result
- Sync validators (return value): process immediately

All tests passing ✓

* Address CodeRabbit review comments

- Hoist sleep helper to describe scope (DRY)
- Make waitFor assertions unconditional for proper retry behavior
- Remove duplicate sleep declaration in third test

All tests still passing (38/38 ✓)

* Fix CodeRabbit consistency issue

Use captured error variable consistently in waitFor assertions

---------

Co-authored-by: Erik Rasmussen <erik@mini.local>

Author: erikras-richard-agent

src/useFieldArray.async-validate-176.test.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import { Form } from 'react-final-form'
+import arrayMutators from 'final-form-arrays'
+import { useFieldArray } from '.'
+import { ARRAY_ERROR } from 'final-form'
+
+// Helper function for async delays
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+
+describe('useFieldArray async validate regression #176', () => {
+  it('should await async validate and not store Promise as ARRAY_ERROR', async () => {
+    
+    const asyncValidate = jest.fn(async (value: any[]) => {
+      await sleep(10)
+      // Return undefined (no error) after async resolution
+      return undefined
+    })
+
+    let formState: any
+
+    const TestComponent = () => {
+      const { fields } = useFieldArray('items', { 
+        validate: asyncValidate 
+      })
+      return (
+        <div>
+          {fields.map((name, index) => (
+            <div key={name}>Item {index}</div>
+          ))}
+        </div>
+      )
+    }
+
+    render(
+      <Form
+        onSubmit={() => {}}
+        mutators={arrayMutators}
+        initialValues={{ items: ['a', 'b', 'c'] }}
+        render={({ form }) => {
+          formState = form.getState()
+          return <TestComponent />
+        }}
+      />
+    )
+    
+    // Initial render - validator should be called
+    await waitFor(() => {
+      expect(asyncValidate).toHaveBeenCalled()
+    })
+
+    // Wait for async validation to complete
+    await waitFor(() => {
+      // The error should NOT be a Promise
+      const error = formState.errors?.items
+      expect(error).not.toBeInstanceOf(Promise)
+      
+      // Check ARRAY_ERROR specifically if it's an array
+      if (Array.isArray(error)) {
+        const arrayError = (error as any)[ARRAY_ERROR]
+        expect(arrayError).not.toBeInstanceOf(Promise)
+      }
+    })
+
+    // Final state check - no errors (3 items, validate returns undefined)
+    expect(formState.errors?.items).toBeUndefined()
+  })
+
+  it('should handle sync validate without breaking', () => {
+    const syncValidate = jest.fn((value: any[]) => {
+      return value && value.length < 2 ? 'Need at least 2 items' : undefined
+    })
+
+    let formState: any
+
+    const TestComponent = () => {
+      const { fields } = useFieldArray('items', { 
+        validate: syncValidate 
+      })
+      return (
+        <div>
+          {fields.map((name, index) => (
+            <div key={name}>Item {index}</div>
+          ))}
+        </div>
+      )
+    }
+
+    render(
+      <Form
+        onSubmit={() => {}}
+        mutators={arrayMutators}
+        initialValues={{ items: ['a', 'b', 'c'] }}
+        render={({ form }) => {
+          formState = form.getState()
+          return <TestComponent />
+        }}
+      />
+    )
+
+    // Sync validator should be called
+    expect(syncValidate).toHaveBeenCalled()
+
+    // Sync errors should work normally
+    expect(formState.errors?.items).toBeUndefined() // 3 items, so no error
+  })
+
+  it('should properly handle async validation errors', async () => {
+    const asyncValidateWithError = jest.fn(async (value: any[]) => {
+      await sleep(10)
+      return value && value.length < 5 ? 'Need at least 5 items' : undefined
+    })
+
+    let formState: any
+
+    const TestComponent = () => {
+      const { fields } = useFieldArray('items', { 
+        validate: asyncValidateWithError 
+      })
+      return (
+        <div>
+          {fields.map((name, index) => (
+            <div key={name}>Item {index}</div>
+          ))}
+        </div>
+      )
+    }
+
+    render(
+      <Form
+        onSubmit={() => {}}
+        mutators={arrayMutators}
+        initialValues={{ items: ['a', 'b', 'c'] }}
+        render={({ form }) => {
+          formState = form.getState()
+          return <TestComponent />
+        }}
+      />
+    )
+
+    // Wait for async validation
+    await waitFor(() => {
+      expect(asyncValidateWithError).toHaveBeenCalled()
+    })
+
+    // Error should be resolved, not a Promise
+    await waitFor(() => {
+      const error = formState.errors?.items
+      expect(error).toBeDefined()
+      expect(Array.isArray(error)).toBe(true)
+      const arrayError = (error as any)[ARRAY_ERROR]
+      expect(arrayError).toBe('Need at least 5 items')
+      expect(arrayError).not.toBeInstanceOf(Promise)
+    })
+  })
+})

src/useFieldArray.ts

@@ -45,7 +45,24 @@ const useFieldArray = (
     !validateProp
       ? undefined
       : (value: any, allValues: any, meta: any) => {
-          const error = validateProp(value, allValues, meta)
+          const rawError = validateProp(value, allValues, meta)
+          
+          // If the validator returned a Promise, await it before processing
+          if (rawError && typeof rawError.then === 'function') {
+            return rawError.then((error: any) => {
+              if (!error || Array.isArray(error)) {
+                return error
+              } else {
+                const arrayError: any[] = []
+                // gross, but we have to set a string key on the array
+                ; (arrayError as any)[ARRAY_ERROR] = error
+                return arrayError
+              }
+            })
+          }
+          
+          // Synchronous validator - process immediately
+          const error = rawError
           if (!error || Array.isArray(error)) {
             return error
           } else {