fix(Forms): add support for Form.SubmitConfirmation inside Wizard

packages/dnb-eufemia/src/extensions/forms/Form/SubmitConfirmation/SubmitConfirmation.tsx

@@ -127,7 +127,7 @@ function SubmitConfirmation(props: ConfirmProps) {
   })
 
   useMemo(() => {
-    if (Object.keys(removeUndefinedProps(submitState)).length > 0) {
+    if (Object.keys(removeUndefinedProps(submitState) || {}).length > 0) {
       submitStateRef.current = {
         ...submitState,
       } as EventStateObject

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { act, fireEvent, render, waitFor } from '@testing-library/react'
-import { Form } from '../../..'
+import { Form, Wizard } from '../../..'
 import { Button, Dialog } from '../../../../../components'
 import { ConfirmParams } from '../SubmitConfirmation'
 import userEvent from '@testing-library/user-event'
@@ -630,6 +630,66 @@ describe('Form.SubmitConfirmation', () => {
     })
   })
 
+  it('should prevent "onSubmit" when used inside a Wizard.Container (with prerender)', async () => {
+    const onSubmit = jest.fn()
+    const onStepChange = jest.fn()
+
+    render(
+      <Form.Handler onSubmit={onSubmit}>
+        <Wizard.Container onStepChange={onStepChange}>
+          <Wizard.Step title="Step 1">
+            <Wizard.Buttons />
+          </Wizard.Step>
+          <Wizard.Step title="Step 2">
+            <Form.SubmitConfirmation preventSubmitWhen={() => true} />
+            <Wizard.Buttons />
+          </Wizard.Step>
+        </Wizard.Container>
+        <Form.SubmitButton />
+      </Form.Handler>
+    )
+
+    const form = document.querySelector('form')
+    await act(async () => {
+      fireEvent.submit(form)
+    })
+
+    expect(onSubmit).toHaveBeenCalledTimes(0)
+    expect(onStepChange).toHaveBeenCalledTimes(1)
+    expect(onStepChange).toHaveBeenLastCalledWith(
+      1,
+      'next',
+      expect.anything()
+    )
+
+    await userEvent.click(
+      document.querySelector('.dnb-forms-previous-button')
+    )
+    expect(onStepChange).toHaveBeenCalledTimes(2)
+    expect(onStepChange).toHaveBeenLastCalledWith(
+      0,
+      'previous',
+      expect.anything()
+    )
+
+    await userEvent.click(
+      document.querySelector('.dnb-forms-submit-button')
+    )
+    expect(onSubmit).toHaveBeenCalledTimes(0)
+    expect(onStepChange).toHaveBeenCalledTimes(3)
+    expect(onStepChange).toHaveBeenLastCalledWith(
+      1,
+      'next',
+      expect.anything()
+    )
+
+    await userEvent.click(
+      document.querySelector('dnb-forms-submit-button')
+    )
+    expect(onSubmit).toHaveBeenCalledTimes(0)
+    expect(onStepChange).toHaveBeenCalledTimes(3)
+  })
+
   it('should not disable buttons when disabled is set to true', () => {
     render(
       <Form.Handler disabled>

packages/dnb-eufemia/src/shared/__tests__/component-helper.test.js

@@ -29,6 +29,7 @@ import {
   matchAll,
   convertJsxToString,
   escapeRegexChars,
+  removeUndefinedProps,
 } from '../component-helper'
 
 beforeAll(() => {
@@ -664,3 +665,26 @@ describe('"escapeRegexChars" should', () => {
     )
   })
 })
+
+describe('"removeUndefinedProps" should', () => {
+  const object = {
+    foo: undefined,
+    bar: null,
+    baz: undefined,
+    qux: null,
+    quux: undefined,
+  }
+
+  it('remove undefined props', () => {
+    expect(removeUndefinedProps(object)).toEqual({
+      bar: null,
+      baz: undefined,
+      qux: null,
+      quux: undefined,
+    })
+  })
+
+  it('remove support undefined as data', () => {
+    expect(removeUndefinedProps(undefined)).toBeUndefined()
+  })
+})

packages/dnb-eufemia/src/shared/component-helper.js

@@ -781,7 +781,7 @@ export function escapeRegexChars(str) {
 }
 
 export function removeUndefinedProps(object) {
-  Object.keys(object).forEach((key) => {
+  Object.keys(object || {}).forEach((key) => {
     if (object[key] === undefined) {
       delete object[key]
     }