#SubmitConfirmation

#Import

import { Form } from '@dnb/eufemia/extensions/forms'
render(<Form.SubmitConfirmation />)

#Description

Form.SubmitConfirmation can be used to prevent the Form.Handler from submitting, and makes it possible to show a confirmation dialog in different scenarios.

import { Dialog } from '@dnb/eufemia'
import { Form } from '@dnb/eufemia/extensions/forms'
render(
  <Form.Handler
    onSubmit={async () => {
      // Your submit request
    }}
  >
    Content...
    <Form.SubmitButton />
    <Form.SubmitConfirmation
      preventSubmitWhen={(submitState) => {
        // Your preventSubmitWhen logic
      }}
      onStateChange={(parameters) => {
        // Your onStateChange logic
      }}
      renderWithState={(parameters) => {
        return 'Your content'
      }}
    />
  </Form.Handler>,
)

The renderWithState function is called whenever the submit confirmation state changes. It receives an object as the first parameter, which contains:

• connectWithDialog lets you connect the submit confirmation with a Dialog.
• submitHandler is a function that can be called to submit the form.
• cancelHandler is a function that can be called to cancel the form.
• setConfirmationState is a function that can be called to update the submit state.
• confirmationState is a string that can be used to determine the current state of the submit confirmation:
  • idle
  • readyToBeSubmitted
  • submitInProgress
  • submissionComplete
• submitState is the state of the onSubmit form event:
  • error
  • info
  • warning
  • success
  • customStatus Your custom status.
• data is the data that was submitted.

#Connect with a Dialog

You can connect the submit confirmation with a Dialog by using the connectWithDialog property. This property is an object that contains the openState, onConfirm, onDecline, and onClose properties, which you can spread to the Dialog component.

import { Dialog } from '@dnb/eufemia'
import { Form } from '@dnb/eufemia/extensions/forms'

render(
  <Form.Handler>
    <Form.SubmitConfirmation
      renderWithState={({ connectWithDialog }) => {
        return (
          <Dialog
            variant="confirmation"
            title="Dialog confirmation title"
            description="Some content describing the situation."
            {...connectWithDialog}
          />
        )
      }}
    />
  </Form.Handler>,
)

#Using the submitHandler and cancelHandler

In addition to connectWithDialog, there are the submitHandler and cancelHandler functions, available to handle the submission and cancellation processes:

<Form.SubmitConfirmation
  renderWithState={({ submitHandler, cancelHandler }) => {
    return (
      <>
        <Button onClick={submitHandler} text="Submit" />
        <Button onClick={cancelHandler} text="Cancel" />
      </>
    )
  }}
/>

#Accessibility

When the cancelHandler is called or the onSubmit event is completed, the Form.SubmitButton will regain focus.