Form.Section.EditContainer#

Demos#

View and edit container#

This demo shows the edit container opened by default by using the containerMode="edit" property.

const MyEditContainer = () => {
  return (
    <Form.Section.EditContainer>
      <Field.Name.First path="/firstName" />
      <Field.Name.Last path="/lastName" />
    </Form.Section.EditContainer>
  )
}
const MyViewContainer = () => {
  return (
    <Form.Section.ViewContainer>
      <Value.SummaryList>
        <Value.Name.First path="/firstName" />
        <Value.Name.Last path="/lastName" />
      </Value.SummaryList>
    </Form.Section.ViewContainer>
  )
}
render(
  <Form.Handler
    onSubmit={async (data) => console.log('onSubmit', data)}
    defaultData={{
      nestedPath: {
        firstName: 'Nora',
      },
    }}
  >
    <Form.Card>
      <Form.SubHeading>Your account</Form.SubHeading>
      <Form.Section path="/nestedPath" required containerMode="edit">
        <MyEditContainer />
        <MyViewContainer />
      </Form.Section>
    </Form.Card>
    <Form.SubmitButton />
  </Form.Handler>
)

Prevent uncommitted changes#

With preventUncommittedChanges, the user must select "Done" or "Cancel" before continuing to the next Wizard step, even when no values have changed.

<Form.Handler>
  <Wizard.Container>
    <Wizard.Step title="Profile">
      <Form.Section path="/profile" containerMode="edit">
        <Form.Section.EditContainer preventUncommittedChanges>
          <Field.Name.First path="/firstName" />
        </Form.Section.EditContainer>

        <Form.Section.ViewContainer>
          <Value.Name.First path="/firstName" />
        </Form.Section.ViewContainer>
      </Form.Section>

      <Wizard.Buttons />
    </Wizard.Step>

    <Wizard.Step title="Summary">
      <Value.Name.First path="/profile/firstName" />
      <Wizard.Buttons />
    </Wizard.Step>
  </Wizard.Container>
</Form.Handler>

Async onDone#

When onDone returns a Promise, the section stays in edit mode while it is pending. It switches to view mode when the Promise resolves and stays in edit mode when it rejects.

While the Promise is pending, the fields inside the section and its "Done" and "Cancel" buttons are disabled. This keeps the submitted values from changing while the save is in flight. If the Promise does not settle within asyncSubmitTimeout (30 seconds by default), the section re-enables itself and stays in edit mode, mirroring Form.Handler's submit behavior, so a save that never settles cannot leave the section stuck.

The demo starts with a simulated save error. Change the first name and select Done to verify that the input remains. Turn off Simulate save error and try again to complete the save.

const formId = 'async-on-done'
const Example = () => {
  const [error, setError] = useState<string>()
  const saveSection = async () => {
    setError(undefined)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    const { getValue } = Form.getData(formId)
    if (getValue('/simulateError')) {
      setError('The section could not be saved. Try again.')
      throw new Error('The section could not be saved')
    }
  }
  return (
    <Form.Handler
      id={formId}
      defaultData={{
        profile: {
          firstName: 'Nora',
        },
        simulateError: true,
      }}
    >
      <Form.Card>
        <Form.Section path="/profile" containerMode="edit">
          <Form.Section.EditContainer onDone={saveSection}>
            <Field.Name.First path="/firstName" />
            <Field.Boolean
              path="//simulateError"
              label="Simulate save error"
              variant="button"
            />
            {error && <FormStatus>{error}</FormStatus>}
          </Form.Section.EditContainer>

          <Form.Section.ViewContainer>
            <Value.Name.First path="/firstName" />
          </Form.Section.ViewContainer>
        </Form.Section>
      </Form.Card>
    </Form.Handler>
  )
}
render(<Example />)

Suggest an edit