From 840d2836d8044123c2af17961d685993bdc908eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Tue, 4 Feb 2025 11:55:12 +0100
Subject: [PATCH] fix(Forms): ensure `update('/path', undefined)` does not show
 error message

---
 .../data-context/__tests__/useData.test.tsx   | 209 +++++++++++++++++-
 .../forms/hooks/useExternalValue.ts           |   4 +-
 .../extensions/forms/hooks/useFieldProps.ts   |  26 ++-
 3 files changed, 227 insertions(+), 12 deletions(-)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
index 65bf6dfcf09..53c5f603d80 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useData.test.tsx
@@ -1,11 +1,12 @@
 import React, { createContext } from 'react'
 import { renderHook, act, render, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { makeUniqueId } from '../../../../../shared/component-helper'
-import { Field, Form, Wizard } from '../../..'
+import { Button } from '../../../../../components'
+import { DataContext, Field, Form, Wizard } from '../../..'
+import { FilterData } from '../../../DataContext/Context'
 import Provider from '../../../DataContext/Provider'
 import useData from '../useData'
-import { FilterData } from '../../../DataContext/Context'
-import userEvent from '@testing-library/user-event'
 
 describe('Form.useData', () => {
   let identifier: string
@@ -402,6 +403,208 @@ describe('Form.useData', () => {
         bar: 'bar',
       })
     })
+
+    it('should set emptyValue as the value of the field', async () => {
+      let dataContext = null
+
+      const MockComponent = () => {
+        const { update } = useData()
+
+        return (
+          <>
+            <Field.String
+              path="/foo"
+              emptyValue="empty"
+              defaultValue="foo"
+            />
+            <Button
+              onClick={() => {
+                update('/foo', 'empty')
+              }}
+            />
+
+            <DataContext.Consumer>
+              {(context) => {
+                dataContext = context
+                return null
+              }}
+            </DataContext.Consumer>
+          </>
+        )
+      }
+
+      render(
+        <Form.Handler>
+          <MockComponent />
+        </Form.Handler>
+      )
+
+      expect(dataContext.data).toEqual({ foo: 'foo' })
+      expect(document.querySelector('input')).toHaveValue('foo')
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(dataContext.data).toEqual({ foo: 'empty' })
+      expect(document.querySelector('input')).toHaveValue('empty')
+    })
+
+    it('should set emptyValue when no value is given', () => {
+      let dataContext = null
+
+      render(
+        <Form.Handler>
+          <Field.String path="/foo" required emptyValue="empty" />
+
+          <DataContext.Consumer>
+            {(context) => {
+              dataContext = context
+              return null
+            }}
+          </DataContext.Consumer>
+        </Form.Handler>
+      )
+
+      expect(dataContext.data).toEqual({ foo: 'empty' })
+      expect(document.querySelector('input')).toHaveValue('empty')
+    })
+
+    it('should prioritize defaultValue over emptyValue', () => {
+      let dataContext = null
+
+      render(
+        <Form.Handler>
+          <Field.String
+            path="/foo"
+            required
+            emptyValue="empty"
+            defaultValue="foo"
+          />
+
+          <DataContext.Consumer>
+            {(context) => {
+              dataContext = context
+              return null
+            }}
+          </DataContext.Consumer>
+        </Form.Handler>
+      )
+
+      expect(dataContext.data).toEqual({ foo: 'foo' })
+      expect(document.querySelector('input')).toHaveValue('foo')
+    })
+
+    it('should set emptyValue as the value of the field without showing error', async () => {
+      let dataContext = null
+
+      const MockComponent = () => {
+        const { update } = Form.useData()
+
+        return (
+          <>
+            <Field.String
+              path="/foo"
+              required
+              emptyValue="empty"
+              defaultValue="foo"
+            />
+            <Button
+              onClick={() => {
+                update('/foo', 'empty')
+              }}
+            />
+
+            <DataContext.Consumer>
+              {(context) => {
+                dataContext = context
+                return null
+              }}
+            </DataContext.Consumer>
+          </>
+        )
+      }
+
+      render(
+        <Form.Handler>
+          <MockComponent />
+        </Form.Handler>
+      )
+
+      expect(dataContext.data).toEqual({ foo: 'foo' })
+      expect(document.querySelector('input')).toHaveValue('foo')
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(dataContext.data).toEqual({ foo: 'empty' })
+      expect(document.querySelector('input')).toHaveValue('empty')
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      fireEvent.submit(document.querySelector('form'))
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).toBeInTheDocument()
+    })
+
+    it('should validate the field after useData update', async () => {
+      let dataContext = null
+
+      const MockComponent = () => {
+        const { update } = Form.useData()
+
+        return (
+          <>
+            <Field.String path="/foo" required defaultValue="foo" />
+            <Button
+              onClick={() => {
+                update('/foo', undefined)
+              }}
+            />
+
+            <DataContext.Consumer>
+              {(context) => {
+                dataContext = context
+                return null
+              }}
+            </DataContext.Consumer>
+          </>
+        )
+      }
+
+      render(
+        <Form.Handler>
+          <MockComponent />
+        </Form.Handler>
+      )
+
+      expect(dataContext.data).toEqual({ foo: 'foo' })
+      expect(document.querySelector('input')).toHaveValue('foo')
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      await userEvent.click(document.querySelector('button'))
+      await userEvent.type(document.querySelector('input'), 'bar')
+
+      expect(dataContext.data).toEqual({ foo: 'bar' })
+      expect(document.querySelector('input')).toHaveValue('bar')
+
+      await userEvent.click(document.querySelector('button'))
+
+      expect(dataContext.data).toEqual({ foo: undefined })
+      expect(document.querySelector('input')).toHaveValue('')
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      fireEvent.submit(document.querySelector('form'))
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).toBeInTheDocument()
+    })
   })
 
   it('should rerender when shared state calls "set"', () => {
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useExternalValue.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useExternalValue.ts
index 60a4ebe4b43..3a7e5ce1b09 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useExternalValue.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useExternalValue.ts
@@ -18,7 +18,7 @@ export default function useExternalValue<Value>(props: Props<Value>) {
   const {
     path,
     itemPath,
-    value,
+    value = undefined,
     transformers,
     emptyValue = undefined,
   } = props
@@ -28,7 +28,7 @@ export default function useExternalValue<Value>(props: Props<Value>) {
   const { value: iterateElementValue } = iterateItemContext || {}
 
   return useMemo(() => {
-    if (value !== emptyValue) {
+    if (value !== undefined && value !== emptyValue) {
       // Value-prop sent directly to the field has highest priority, overriding any surrounding source
       return transformers?.current?.fromExternal?.(value) ?? emptyValue
     }
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
index 83e30cef55b..b78643fa920 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -267,7 +267,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     itemPath,
     value: valueProp,
     transformers,
-    emptyValue,
+    emptyValue: defaultValue ? undefined : emptyValue,
   })
   const externalValueDeps = tmpValue
   const externalValue = transformers.current.transformIn(
@@ -1914,6 +1914,14 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     // Error or removed error for this field from the surrounding data context (by path)
     if (externalValueDidChangeRef.current) {
       externalValueDidChangeRef.current = false
+
+      // Hide error when the external value has changed, but is the same as the empty value.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      if (emptyValue === valueRef.current) {
+        hideError()
+      }
+
       validateValue()
       forceUpdate()
     }
@@ -1952,7 +1960,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
         return // stop here
       }
 
-      let valueToStore: Value | unknown = valueProp ?? emptyValue
+      let valueToStore: Value | unknown = valueProp
 
       const data = wizardContext?.prerenderFieldProps
         ? dataContext.data
@@ -1992,11 +2000,15 @@ export default function useFieldProps<Value, EmptyValue, Props>(
         typeof defaultValueRef.current !== 'undefined' &&
         typeof valueToStore === 'undefined'
 
-      if (hasDefaultValue) {
-        // Set the default value if it's not set yet.
-        // This takes precedence over the valueToStore.
-        valueToStore = defaultValueRef.current
-        defaultValueRef.current = undefined
+      if (!hasValue) {
+        if (hasDefaultValue) {
+          // Set the default value if it's not set yet.
+          // This takes precedence over the valueToStore.
+          valueToStore = defaultValueRef.current
+          defaultValueRef.current = undefined
+        } else if (typeof valueToStore === 'undefined') {
+          valueToStore = emptyValue
+        }
       }
 
       let skipEqualCheck = false