Skip to content

DateInput in uncontrolled form - form reset - ui not reseted #6818

@Moritz-DXC

Description

@Moritz-DXC

Using the DateInput component in an uncontrolled form, does not reset the UI (but the value) on reset of the form.

Expected Behavior

After form reset event the DateInput should show the placeholder or format again (same as if value is undefined). The value is set correctly to undefined.

Actual Behavior

Date is still displayed instead of placeholder or format and value is undefined as expected.

URL, screen shot, or Codepen exhibiting the issue

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

I just wrote the code in the DateInput documentation. https://v2.grommet.io/dateinput
You can just copy it there.

Steps to Reproduce

  1. Open a console, because output will be logged there.
  2. Select a date in the date picker
  3. Write a text in the TextInput
  4. Check the console, you will see the form value like:
  • {"date":"2023-05-16T22:00:00.000Z"}
  • {"date":"2023-05-16T22:00:00.000Z","text":"123"}
  1. Now click the reset button
  2. Check the console, it will show an empty object: {}
  3. TextInput will be empty, but DateInput still shows the date.

Your Environment

  • Grommet version: "^2.29.0",
  • Browser Name and version: Firefox 113.0.2 (64-bit) (Windows), but also occurs for colleauges
  • Operating System and version (desktop or mobile): Desktop

Metadata

Metadata

Assignees

Labels

bugissue that does not match design or documentation and requires code changes to address

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions