How do you integrate @mantine/date components with @mantine/form forms?

[jimmycuadra]

The documentation for @mantine/date does not include any examples of integrating the components into a larger form. I found that I could connect the form's state to a date component by using form.getInputProps like the documentation for @mantine/form shows:

<DateTimePicker {...form.getInputProps("example")} />

But resetting the parent form does not reset the date component to its initial state. Given a component with the following JSX:

<form>
  <DateTimePicker {...form.getInputProps("example")} />
  <Button color="red" onClick={form.reset}>Cancel</Button>
</form>

Clicking the reset button does not reset the date picker, but it does reset the values of the other inputs in the form (omitted in the snippet for brevity).

In both code snippets, form is created like this:

interface FormValues {
  example: string | null;
}

const form = useForm<FormValues>({
  mode: "uncontrolled",
  initialValues: {
    example: null,
  },
});

Is there a way to make form aware of the date component? Or a way to programmatically reset the date component in a custom click handler?

[rtivital]

Uncontrolled form mode requires key={form.key('example')} in order to work correctly.

[jimmycuadra]

That did it! Thank you very much!