fix(Forms): hide info, warning or error prop when undefined is given to a Field (#4634)

Fixes #4611

Author: tujoworker

packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx

@@ -171,6 +171,23 @@ describe('Field.Number', () => {
         ).toBeInTheDocument()
       })
 
+      it('should hide error when undefined is returned by error function', () => {
+        const { rerender } = render(
+          <Field.Number
+            error={() => new Error('This is what went wrong')}
+          />
+        )
+        expect(
+          screen.getByText('This is what went wrong')
+        ).toBeInTheDocument()
+
+        rerender(<Field.Number error={() => undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
+
       it('renders error given as a function with value', () => {
         render(
           <Field.Number

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx

@@ -32,6 +32,7 @@ import {
   FieldProps,
   SubmitState,
   Identifier,
+  UseFieldProps,
 } from '../types'
 import type { FormLabelAllProps } from '../../../components/FormLabel'
 import HelpButtonInline, {
@@ -159,7 +160,7 @@ function FieldBlock(props: Props) {
     required,
     info,
     warning,
-    error: errorProp,
+    error,
     disableStatusSummary,
     fieldState,
     disabled,
@@ -175,16 +176,18 @@ function FieldBlock(props: Props) {
   const hasCustomWidth = /\d(rem)$/.test(String(width))
   const hasCustomContentWidth = /\d(rem)$/.test(String(contentWidth))
 
+  const infoRef = useRef<UseFieldProps['info']>()
+  const warningRef = useRef<UseFieldProps['warning']>()
+  const errorRef = useRef<UseFieldProps['error']>()
+
   const blockId = useId(props.id)
   const [salt, forceUpdate] = useReducer(() => ({}), {})
   const mountedFieldsRef = useRef<MountedFieldsRef>({})
   const fieldStateRef = useRef<SubmitState>(null)
   const stateRecordRef = useRef<StateRecord>({})
   const fieldStateIdsRef = useRef<FieldErrorIdsRef>(null)
   const contentsRef = useRef<HTMLDivElement>(null)
-  const hasInitiallyErrorProp = useMemo(() => {
-    return Boolean(errorProp)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  const hasInitiallyErrorPropRef = useRef(Boolean(error))
 
   const label = useIterateItemNo({
     label: labelProp,
@@ -273,16 +276,18 @@ function FieldBlock(props: Props) {
   )
 
   const statusContent = useMemo(() => {
-    if (typeof errorProp !== 'undefined') {
+    if (typeof error !== 'undefined' || (errorRef.current && !error)) {
+      errorRef.current = error
       setInternalRecord({
         identifier: blockId,
-        showInitially: hasInitiallyErrorProp,
+        showInitially: hasInitiallyErrorPropRef.current,
         type: 'error',
-        content: errorProp,
+        content: error,
       })
     }
 
-    if (typeof warning !== 'undefined') {
+    if (typeof warning !== 'undefined' || warningRef.current !== warning) {
+      warningRef.current = warning
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -291,7 +296,8 @@ function FieldBlock(props: Props) {
       })
     }
 
-    if (typeof info !== 'undefined') {
+    if (typeof info !== 'undefined' || infoRef.current !== info) {
+      infoRef.current = info
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -405,13 +411,12 @@ function FieldBlock(props: Props) {
       return acc
     }, salt) as StatusContent
   }, [
-    errorProp,
+    error,
     warning,
     info,
     salt,
     setInternalRecord,
     blockId,
-    hasInitiallyErrorProp,
     props.id,
     forId,
     label,
@@ -420,9 +425,9 @@ function FieldBlock(props: Props) {
   // Handle the error prop from outside
   useEffect(() => {
     if (!nestedFieldBlockContext) {
-      showFieldError(blockId, Boolean(errorProp))
+      showFieldError(blockId, Boolean(error))
     }
-  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext])
+  }, [error, blockId, showFieldError, nestedFieldBlockContext])
 
   useEffect(
     () => () => {
@@ -519,7 +524,7 @@ function FieldBlock(props: Props) {
         setBlockRecord,
         setFieldState,
         showFieldError,
-        hasErrorProp: Boolean(errorProp),
+        hasErrorProp: Boolean(error),
         fieldStateIdsRef,
         mountedFieldsRef,
         composition,

packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx

@@ -730,6 +730,34 @@ describe('FieldBlock', () => {
         expect(element).toHaveClass('dnb-height-animation--is-visible')
         expect(element).toHaveTextContent(blockInfo)
       })
+
+      it('should show and hide the message when info prop gets "undefined"', () => {
+        const { rerender } = render(<FieldBlock info="message" />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<FieldBlock info={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
+
+      it('should show and hide the message when info prop gets "undefined" (using Field.String in order to include useFieldProps)', () => {
+        const { rerender } = render(<Field.String info="message" />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<Field.String info={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
     })
 
     describe('warning prop', () => {
@@ -758,6 +786,34 @@ describe('FieldBlock', () => {
         expect(element).toHaveClass('dnb-height-animation--is-visible')
         expect(element).toHaveTextContent(blockWarning)
       })
+
+      it('should show and hide the message when warning prop gets "undefined"', () => {
+        const { rerender } = render(<FieldBlock warning="message" />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<FieldBlock warning={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
+
+      it('should show and hide the message when warning prop gets "undefined" (using Field.String in order to include useFieldProps)', () => {
+        const { rerender } = render(<Field.String warning="message" />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<Field.String warning={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
     })
 
     describe('error prop', () => {
@@ -773,6 +829,38 @@ describe('FieldBlock', () => {
         expect(element).toHaveClass('dnb-height-animation--is-visible')
         expect(element).toHaveTextContent(blockError)
       })
+
+      it('should show and hide the message when error prop gets "undefined"', () => {
+        const { rerender } = render(
+          <FieldBlock error={new Error('message')} />
+        )
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<FieldBlock error={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
+
+      it('should show and hide the message when error prop gets "undefined" (using Field.String in order to include useFieldProps)', () => {
+        const { rerender } = render(
+          <Field.String error={new Error('message')} />
+        )
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).toBeInTheDocument()
+
+        rerender(<Field.String error={undefined} />)
+
+        expect(
+          document.querySelector('.dnb-form-status')
+        ).not.toBeInTheDocument()
+      })
     })
 
     describe('summarize errors', () => {

packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx

@@ -292,7 +292,12 @@ describe('useFieldProps', () => {
       const { result } = renderHook(useFieldProps, {
         initialProps: {
           value: '',
-          error: new Error('Error message'),
+          onChangeValidator: () => {
+            return new Error('Error message')
+          },
+          onBlurValidator: () => {
+            return new Error('Error message')
+          },
           validateInitially: false,
         },
       })
@@ -2076,6 +2081,7 @@ describe('useFieldProps', () => {
 
       expect(result.current.htmlAttributes).toEqual({
         'aria-describedby': expect.stringMatching(/id-.*-form-status/),
+        'aria-invalid': 'true',
       })
 
       rerender({})

packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts

@@ -126,7 +126,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     disabled: disabledProp,
     info: infoProp,
     warning: warningProp,
-    error: errorProp,
+    error: initialErrorProp = 'initial',
     errorMessages,
     onFocus,
     onBlur,
@@ -444,7 +444,11 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     [getFieldByPath, getValueByPath]
   )
 
-  const error = executeMessage<UseFieldProps['error']>(errorProp)
+  const errorProp =
+    initialErrorProp === 'initial' ? undefined : initialErrorProp
+  const error = executeMessage<UseFieldProps['error'] | 'initial'>(
+    errorProp
+  )
   const warning = executeMessage<UseFieldProps['warning']>(warningProp)
   const info = executeMessage<UseFieldProps['info']>(infoProp)
 
@@ -728,13 +732,24 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     revealErrorRef.current = true
   }
 
-  const bufferedError = revealErrorRef.current
-    ? prepareError(error) ??
-      localErrorRef.current ??
-      contextErrorRef.current
-    : error === null
-    ? null
-    : undefined
+  const getBufferedError = useCallback(() => {
+    if (
+      initialErrorProp !== 'initial' &&
+      typeof errorProp !== 'function'
+    ) {
+      return prepareError(errorProp)
+    } else if (revealErrorRef.current) {
+      return (
+        prepareError(error as FormError) ??
+        localErrorRef.current ??
+        contextErrorRef.current
+      )
+    } else if (error === null) {
+      return null
+    }
+  }, [error, errorProp, initialErrorProp, prepareError])
+
+  const bufferedError = getBufferedError()
 
   const hasVisibleError =
     Boolean(bufferedError) ||
@@ -2350,12 +2365,12 @@ export default function useFieldProps<Value, EmptyValue, Props>(
 
   const infoRef = useRef<UseFieldProps['info']>(info)
   const warningRef = useRef<UseFieldProps['warning']>(warning)
-  if (typeof info !== 'undefined') {
+  useMemo(() => {
     infoRef.current = info
-  }
-  if (typeof warning !== 'undefined') {
+  }, [info])
+  useMemo(() => {
     warningRef.current = warning
-  }
+  }, [warning])
 
   const connections = useMemo(() => {
     return {