fix(Forms): update emptyValue documentation and type to reflect how…

… it's used internally (#3729)
dnbexperience · Jul 2, 2024 · ff755e7 · ff755e7
1 parent 26b45b8
commit ff755e7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -31,7 +31,7 @@ interface ErrorMessages extends CustomErrorMessages {
 }
 
 export type Props = FieldHelpProps &
-  FieldProps<number, undefined, ErrorMessages> & {
+  FieldProps<number, undefined | number, ErrorMessages> & {
     inputClassName?: string
     currency?: InputMaskedProps['as_currency']
     currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -324,6 +324,7 @@ describe('Field.Number', () => {
         myFieldWithNull: null,
         myFieldWithUndefined: undefined,
         myFieldWithEmptyString: '',
+        myFieldWithZero: 0,
         myFieldWitInvalidType: 'foo',
       }
 
@@ -341,29 +342,15 @@ describe('Field.Number', () => {
         expect(statuses).toHaveLength(0)
       })
 
-      it('allow empty string as emptyValue', () => {
+      it('allow number as emptyValue', () => {
         render(
           <Form.Handler schema={schema} data={data}>
-            <Field.Number path="/myFieldWithEmptyString" />
+            <Field.Number path="/myFieldWithZero" />
           </Form.Handler>
         )
 
         const input = document.querySelector('input')
-        expect(input).toHaveValue('')
-
-        const statuses = document.querySelectorAll('.dnb-form-status')
-        expect(statuses).toHaveLength(0)
-      })
-
-      it('allow empty string as empty value', () => {
-        render(
-          <Form.Handler schema={schema} data={data}>
-            <Field.Number path="/myFieldWithEmptyString" />
-          </Form.Handler>
-        )
-
-        const input = document.querySelector('input')
-        expect(input).toHaveValue('')
+        expect(input).toHaveValue('0')
 
         const statuses = document.querySelectorAll('.dnb-form-status')
         expect(statuses).toHaveLength(0)
@@ -403,6 +390,29 @@ describe('Field.Number', () => {
         log.mockRestore()
       })
     })
+
+    it('should use emptyValue when not set in data context', () => {
+      const onSubmit = jest.fn()
+      render(
+        <Form.Handler data={{}} onSubmit={onSubmit}>
+          <Field.Number
+            label="Label"
+            value={0}
+            path="/myValue"
+            emptyValue={0}
+          />
+        </Form.Handler>
+      )
+
+      const form = document.querySelector('form')
+      fireEvent.submit(form)
+
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      expect(onSubmit).toHaveBeenCalledWith(
+        { myValue: 0 },
+        expect.anything()
+      )
+    })
   })
 
   describe('event handlers', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/DataValueDocs.ts
@@ -38,7 +38,7 @@ export const dataValueProperties: PropertiesTableProps = {
   },
   emptyValue: {
     doc: 'The value to use (in `onChange` events etc) when emptying the field. Makes it possible for instance to provide `undefined` instead of an empty string when clearing the content of a text input.',
-    type: 'any',
+    type: ['{valueType}', 'undefined'],
     status: 'optional',
   },
   required: {