What does this PR do?

The MaskedInput inside of DateInput is controlled. Therefore, in an uncontrolled form, when the form is reset, the text value in the DateInput isn't. This PR updates DateInput to listen for the reset event to reset the textValue.

Where should the reviewer start?

src/js/components/DateInput/DateInput.js

What testing has been done on this PR?

Tested with code snippet provided in #6818

Also tested with:

import React from 'react';

import { DateInput, Form, TextInput, Button } from 'grommet';

export const Simple = () => (
  <>
    <Form
      onChange={(value) => {
        console.log(JSON.stringify(value));
      }}
      onReset={(e) => {
        console.log('my reset');
        e.stopPropagation();
      }}
    >
      <DateInput format="mm/dd/yyyy" name="date" />
      <TextInput name="text" />
      <Button label="clear" type="reset" />
    </Form>

    <Form
      onChange={(value) => {
        console.log(JSON.stringify(value));
      }}
    >
      <DateInput format="mm/dd/yyyy" name="date-2" />
      <TextInput name="text-2" />
      <Button label="clear" type="reset" />
    </Form>
  </>
);

Simple.parameters = {
  chromatic: { disable: true },
};

export default {
  title: 'Input/DateInput/Simple',
};

Added jest test.

How should this be manually tested?

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes #6818

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No.

Should this PR be mentioned in the release notes?

Yes. Fixed bug where DateInput text value did not reset with Form reset.

Is this change backwards compatible or is it a breaking change?

Backwards compatible.