fix(Forms): show indicator with async onBlurValidator call when `vali…

…dateInitially` is used (#4303)
dnbexperience · Nov 20, 2024 · c585491 · c585491
1 parent 0e2d918
commit c585491
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx
@@ -4408,6 +4408,10 @@ describe('useFieldProps', () => {
           </Form.Handler>
         )
 
+        expect(
+          document.querySelector('.dnb-forms-submit-indicator')
+        ).toHaveClass('dnb-forms-submit-indicator--state-pending')
+
         await waitFor(() => {
           expect(screen.queryByRole('alert')).toBeInTheDocument()
         })
@@ -4581,7 +4585,7 @@ describe('useFieldProps', () => {
       })
 
       describe('validateInitially', () => {
-        it('should not show error message initially', async () => {
+        it('should show error message initially', async () => {
           const validator = jest.fn(validatorFn)
 
           render(
@@ -4597,7 +4601,9 @@ describe('useFieldProps', () => {
             </Form.Handler>
           )
 
-          expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+          await waitFor(() => {
+            expect(screen.queryByRole('alert')).toBeInTheDocument()
+          })
         })
 
         it('should not show error message while typing', async () => {
@@ -4620,7 +4626,7 @@ describe('useFieldProps', () => {
             document.querySelectorAll('input')
           )
 
-          expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+          expect(screen.queryByRole('alert')).toBeInTheDocument()
 
           await userEvent.type(inputWithRefValue, '{Backspace}')
 
@@ -4680,9 +4686,7 @@ describe('useFieldProps', () => {
 
           await userEvent.type(inputWithRefValue, '3')
 
-          await waitFor(() => {
-            expect(screen.queryByRole('alert')).not.toBeInTheDocument()
-          })
+          expect(screen.queryByRole('alert')).not.toBeInTheDocument()
         })
       })
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -992,6 +992,8 @@ export default function useFieldProps<Value, EmptyValue, Props>(
       }
 
       revealOnBlurValidatorResult({ result })
+
+      return { result }
     },
     [
       asyncBehaviorIsEnabled,
@@ -1112,7 +1114,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
         validateInitially &&
         !changedRef.current
       ) {
-        const { result } = await callOnBlurValidator()
+        const { result } = await startOnBlurValidatorProcess()
 
         if (result instanceof Error) {
           initiator = 'onBlurValidator'
@@ -1131,7 +1133,6 @@ export default function useFieldProps<Value, EmptyValue, Props>(
       }
     }
   }, [
-    callOnBlurValidator,
     clearErrorState,
     disabled,
     emptyValue,
@@ -1141,6 +1142,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     required,
     requiredProp,
     setFieldState,
+    startOnBlurValidatorProcess,
     startOnChangeValidatorValidation,
     startProcess,
     validateInitially,