Fix DateInput Initial Formatting Without Making Form Dirty

packages/ra-ui-materialui/package.json

@@ -37,6 +37,7 @@
         "final-form-arrays": "^3.0.2",
         "ignore-styles": "~5.0.1",
         "ra-core": "^3.15.1",
+        "ra-test": "^3.15.1",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
         "react-final-form": "^6.5.2",

packages/ra-ui-materialui/src/input/DateInput.spec.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, fireEvent } from '@testing-library/react';
+import { Form } from 'react-final-form';
+import { required, FormWithRedirect } from 'ra-core';
+import { renderWithRedux } from 'ra-test';
+import format from 'date-fns/format';
 
 import DateInput from './DateInput';
-import { Form } from 'react-final-form';
-import { required } from 'ra-core';
+import { FormApi } from 'final-form';
 
 describe('<DateInput />', () => {
     const defaultProps = {
@@ -24,6 +27,23 @@ describe('<DateInput />', () => {
         );
     });
 
+    it('should not make the form dirty on initialization', () => {
+        const publishedAt = new Date().toISOString();
+        let formApi: FormApi;
+        const { getByDisplayValue } = renderWithRedux(
+            <FormWithRedirect
+                onSubmit={jest.fn}
+                record={{ id: 1, publishedAt }}
+                render={({ form }) => {
+                    formApi = form;
+                    return <DateInput {...defaultProps} />;
+                }}
+            />
+        );
+        expect(getByDisplayValue(format(publishedAt, 'YYYY-MM-DD')));
+        expect(formApi.getState().dirty).toEqual(false);
+    });
+
     it('should call `input.onChange` method when changed', () => {
         let formApi;
         const { getByLabelText } = render(

packages/ra-ui-materialui/src/input/DateInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 import { useInput, FieldTitle, InputProps } from 'ra-core';
@@ -49,6 +48,7 @@ const DateInput = ({
     format = getStringFromDate,
     initialValue,
     label,
+    name,
     options,
     source,
     resource,
@@ -74,6 +74,7 @@ const DateInput = ({
         format,
         formatOnBlur: true,
         initialValue: sanitizedInitialValue,
+        name,
         onBlur,
         onChange,
         onFocus,
@@ -86,21 +87,13 @@ const DateInput = ({
 
     const { error, submitError, touched } = meta;
 
-    // Workaround for https://github.com/final-form/react-final-form/issues/431
-    useEffect(() => {
-        // Checking for meta.initial allows the format function to work
-        // on inputs inside an ArrayInput
-        if (defaultValue || initialValue || meta.initial) {
-            input.onBlur();
-        }
-    }, [input.onBlur, meta.initial]); // eslint-disable-line
-
     return (
         <TextField
             id={id}
             {...input}
             // Workaround https://github.com/final-form/react-final-form/issues/529
-            value={input.value || ''}
+            // & https://github.com/final-form/react-final-form/issues/431
+            value={format(input.value) || ''}
             variant={variant}
             margin={margin}
             type="date"

packages/ra-ui-materialui/src/input/DateTimeInput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 import { useInput, FieldTitle, InputProps } from 'ra-core';
@@ -107,21 +106,13 @@ const DateTimeInput = ({
 
     const { error, submitError, touched } = meta;
 
-    // Workaround for https://github.com/final-form/react-final-form/issues/431
-    useEffect(() => {
-        // Checking for meta.initial allows the format function to work
-        // on inputs inside an ArrayInput
-        if (defaultValue || initialValue || meta.initial) {
-            input.onBlur();
-        }
-    }, [input.onBlur, meta.initial]); // eslint-disable-line
-
     return (
         <TextField
             id={id}
             {...input}
             // Workaround https://github.com/final-form/react-final-form/issues/529
-            value={input.value || ''}
+            // and https://github.com/final-form/react-final-form/issues/431
+            value={format(input.value) || ''}
             variant={variant}
             margin={margin}
             error={!!(touched && (error || submitError))}