Fix <DateInput> and <DateTimeInput> do not react to form changes

React-Admin CI · React-Admin CI · commit 414c4ad4b0b4 · 2024-11-07T16:32:28.000+01:00
diff --git a/packages/ra-ui-materialui/src/input/DateInput.spec.tsx b/packages/ra-ui-materialui/src/input/DateInput.spec.tsx
@@ -8,7 +8,7 @@ import { useFormState } from 'react-hook-form';
 import { AdminContext } from '../AdminContext';
 import { SimpleForm } from '../form';
 import { DateInput } from './DateInput';
-import { Basic, Parse } from './DateInput.stories';
+import { Basic, ExternalChanges, Parse } from './DateInput.stories';
 
 describe('<DateInput />', () => {
     const defaultProps = {
@@ -246,6 +246,25 @@ describe('<DateInput />', () => {
         });
     });
 
+    it('should change its value when the form value has changed', async () => {
+        render(
+            <ExternalChanges
+                simpleFormProps={{
+                    defaultValues: { publishedAt: '2021-09-11' },
+                }}
+            />
+        );
+        await screen.findByText('"2021-09-11" (string)');
+        const input = screen.getByLabelText('Published at') as HTMLInputElement;
+        fireEvent.change(input, {
+            target: { value: '2021-10-30' },
+        });
+        fireEvent.blur(input);
+        await screen.findByText('"2021-10-30" (string)');
+        fireEvent.click(screen.getByText('Change value'));
+        await screen.findByText('"2021-10-20" (string)');
+    });
+
     describe('error message', () => {
         it('should not be displayed if field is pristine', () => {
             render(<Basic dateInputProps={{ validate: required() }} />);
diff --git a/packages/ra-ui-materialui/src/input/DateInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateInput.stories.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { minValue } from 'ra-core';
+import { minValue, useRecordContext } from 'ra-core';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Button, Typography } from '@mui/material';
+import get from 'lodash/get';
 
 import { AdminContext } from '../AdminContext';
 import { Create } from '../detail';
@@ -100,6 +103,19 @@ export const Parse = ({ simpleFormProps }) => (
     </Wrapper>
 );
 
+export const ExternalChanges = ({
+    simpleFormProps = {
+        defaultValues: { publishedAt: '2021-09-11' },
+    },
+}: {
+    simpleFormProps?: Omit<SimpleFormProps, 'children'>;
+}) => (
+    <Wrapper simpleFormProps={simpleFormProps}>
+        <DateInput source="publishedAt" />
+        <DateHelper source="publishedAt" value="2021-10-20" />
+    </Wrapper>
+);
+
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
 const Wrapper = ({
@@ -118,3 +134,37 @@ const Wrapper = ({
         </Create>
     </AdminContext>
 );
+
+const DateHelper = ({ source, value }: { source: string; value: string }) => {
+    const record = useRecordContext();
+    const { resetField, setValue } = useFormContext();
+    const currentValue = useWatch({ name: source });
+
+    return (
+        <Box>
+            <Typography>
+                Record value: {get(record, source)?.toString() ?? '-'}
+            </Typography>
+            <Typography>
+                Current value: {currentValue?.toString() ?? '-'}
+            </Typography>
+            <Button
+                onClick={() => {
+                    setValue(source, value, { shouldDirty: true });
+                }}
+                type="button"
+            >
+                Change value
+            </Button>
+            <Button
+                color="error"
+                onClick={() => {
+                    resetField(source);
+                }}
+                type="button"
+            >
+                Reset
+            </Button>
+        </Box>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx
@@ -71,25 +71,20 @@ export const DateInput = ({
     const valueChangedFromInput = React.useRef(false);
     const localInputRef = React.useRef<HTMLInputElement>();
     const initialDefaultValueRef = React.useRef(field.value);
+    const currentValueRef = React.useRef(field.value);
 
     // update the react-hook-form value if the field value changes
     React.useEffect(() => {
-        const initialDateValue =
-            new Date(initialDefaultValueRef.current).getTime() || null;
-
-        const fieldDateValue = new Date(field.value).getTime() || null;
-
         if (
-            initialDateValue !== fieldDateValue &&
+            currentValueRef.current !== field.value &&
             !valueChangedFromInput.current
         ) {
             setRenderCount(r => r + 1);
-            field.onChange(field.value);
             initialDefaultValueRef.current = field.value;
-            valueChangedFromInput.current = false;
+            currentValueRef.current = field.value;
         }
+        valueChangedFromInput.current = false;
     }, [setRenderCount, field]);
-
     const { onBlur: onBlurFromField } = field;
     const hasFocus = React.useRef(false);
 
@@ -119,6 +114,7 @@ export const DateInput = ({
             if (newValue !== '' && newValue != null && isNewValueValid) {
                 field.onChange(newValue);
                 valueChangedFromInput.current = true;
+                currentValueRef.current = newValue;
             }
         }
     );
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.spec.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.spec.tsx
@@ -10,6 +10,7 @@ import { SimpleForm, Toolbar } from '../form';
 import { DateTimeInput } from './DateTimeInput';
 import { ArrayInput, SimpleFormIterator } from './ArrayInput';
 import { SaveButton } from '../button';
+import { ExternalChanges } from './DateTimeInput.stories';
 
 describe('<DateTimeInput />', () => {
     const defaultProps = {
@@ -197,6 +198,25 @@ describe('<DateTimeInput />', () => {
         });
     });
 
+    it('should change its value when the form value has changed', async () => {
+        render(
+            <ExternalChanges
+                simpleFormProps={{
+                    defaultValues: { published: '2021-09-11 20:00:00' },
+                }}
+            />
+        );
+        await screen.findByText('"2021-09-11 20:00:00" (string)');
+        const input = screen.getByLabelText('Published') as HTMLInputElement;
+        fireEvent.change(input, {
+            target: { value: '2021-10-30 09:00:00' },
+        });
+        fireEvent.blur(input);
+        await screen.findByText('"2021-10-30T09:00" (string)');
+        fireEvent.click(screen.getByText('Change value'));
+        await screen.findByText('"2021-10-20 10:00:00" (string)');
+    });
+
     describe('error message', () => {
         it('should not be displayed if field is pristine', () => {
             render(
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.stories.tsx
@@ -1,10 +1,14 @@
 import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
+import { useRecordContext } from 'ra-core';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Button, Typography } from '@mui/material';
+import get from 'lodash/get';
 
 import { AdminContext } from '../AdminContext';
 import { Create } from '../detail';
-import { SimpleForm } from '../form';
+import { SimpleForm, SimpleFormProps } from '../form';
 import { DateTimeInput } from './DateTimeInput';
 import { FormInspector } from './common';
 
@@ -44,15 +48,68 @@ export const ReadOnly = () => (
     </Wrapper>
 );
 
+export const ExternalChanges = ({
+    simpleFormProps = {
+        defaultValues: { published: '2021-09-11 20:00:00' },
+    },
+}: {
+    simpleFormProps?: Omit<SimpleFormProps, 'children'>;
+}) => (
+    <Wrapper simpleFormProps={simpleFormProps}>
+        <DateTimeInput source="published" />
+        <DateHelper source="published" value="2021-10-20 10:00:00" />
+    </Wrapper>
+);
+
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
-const Wrapper = ({ children }) => (
+const Wrapper = ({
+    children,
+    simpleFormProps,
+}: {
+    children: React.ReactNode;
+    simpleFormProps?: Omit<SimpleFormProps, 'children'>;
+}) => (
     <AdminContext i18nProvider={i18nProvider} defaultTheme="light">
         <Create resource="posts">
-            <SimpleForm>
+            <SimpleForm {...simpleFormProps}>
                 {children}
                 <FormInspector name="published" />
             </SimpleForm>
         </Create>
     </AdminContext>
 );
+
+const DateHelper = ({ source, value }: { source: string; value: string }) => {
+    const record = useRecordContext();
+    const { resetField, setValue } = useFormContext();
+    const currentValue = useWatch({ name: source });
+
+    return (
+        <Box>
+            <Typography>
+                Record value: {get(record, source)?.toString() ?? '-'}
+            </Typography>
+            <Typography>
+                Current value: {currentValue?.toString() ?? '-'}
+            </Typography>
+            <Button
+                onClick={() => {
+                    setValue(source, value, { shouldDirty: true });
+                }}
+                type="button"
+            >
+                Change value
+            </Button>
+            <Button
+                color="error"
+                onClick={() => {
+                    resetField(source);
+                }}
+                type="button"
+            >
+                Reset
+            </Button>
+        </Box>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
@@ -53,24 +53,18 @@ export const DateTimeInput = ({
     const valueChangedFromInput = React.useRef(false);
     const localInputRef = React.useRef<HTMLInputElement>();
     const initialDefaultValueRef = React.useRef(field.value);
+    const currentValueRef = React.useRef(field.value);
 
     React.useEffect(() => {
-        const initialDateValue =
-            new Date(initialDefaultValueRef.current).getTime() || null;
-
-        const fieldDateValue = new Date(field.value).getTime() || null;
-
         if (
-            initialDateValue !== fieldDateValue &&
+            currentValueRef.current !== field.value &&
             !valueChangedFromInput.current
         ) {
             setRenderCount(r => r + 1);
-            parse
-                ? field.onChange(parse(field.value))
-                : field.onChange(field.value);
             initialDefaultValueRef.current = field.value;
-            valueChangedFromInput.current = false;
+            currentValueRef.current = field.value;
         }
+        valueChangedFromInput.current = false;
     }, [setRenderCount, parse, field]);
 
     const { onBlur: onBlurFromField } = field;
@@ -88,23 +82,17 @@ export const DateTimeInput = ({
             return;
         }
         const target = event.target;
+        const newValue = target.value;
+        const isNewValueValid =
+            newValue === '' || !isNaN(new Date(target.value).getTime());
 
-        const newValue =
-            target.valueAsDate !== undefined &&
-            target.valueAsDate !== null &&
-            !isNaN(new Date(target.valueAsDate).getTime())
-                ? parse
-                    ? parse(target.valueAsDate)
-                    : target.valueAsDate
-                : parse
-                  ? parse(target.value)
-                  : formatDateTime(target.value);
-
-        // Some browsers will return null for an invalid date so we only change react-hook-form value if it's not null
+        // Some browsers will return null for an invalid date
+        // so we only change react-hook-form value if it's not null.
         // The input reset is handled in the onBlur event handler
-        if (newValue !== '' && newValue != null) {
+        if (newValue !== '' && newValue != null && isNewValueValid) {
             field.onChange(newValue);
             valueChangedFromInput.current = true;
+            currentValueRef.current = newValue;
         }
     };
 
@@ -122,20 +110,14 @@ export const DateTimeInput = ({
             return;
         }
 
+        const newValue = localInputRef.current.value;
         // To ensure users can clear the input, we check its value on blur
         // and submit it to react-hook-form
-        const newValue =
-            localInputRef.current.valueAsDate !== undefined &&
-            localInputRef.current.valueAsDate !== null &&
-            !isNaN(new Date(localInputRef.current.valueAsDate).getTime())
-                ? parse
-                    ? parse(localInputRef.current.valueAsDate)
-                    : formatDateTime(localInputRef.current.valueAsDate)
-                : parse
-                  ? parse(localInputRef.current.value)
-                  : formatDateTime(localInputRef.current.value);
-
-        if (newValue !== field.value) {
+        const isNewValueValid =
+            newValue === '' ||
+            !isNaN(new Date(localInputRef.current.value).getTime());
+
+        if (isNewValueValid && field.value !== newValue) {
             field.onChange(newValue ?? '');
         }
 
