From 355d240d703773a4e4afc50a5aaca821ef240db4 Mon Sep 17 00:00:00 2001
From: Anthony Rimet <anthony.rimet03@gmail.com>
Date: Fri, 22 Dec 2023 16:48:28 +0100
Subject: [PATCH] Fix(input) Refactor date and time input handling

---
 .../ra-ui-materialui/src/input/DateInput.tsx  | 30 +++++++++++++------
 .../src/input/DateTimeInput.tsx               | 19 +++++++-----
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx
index 47ab2c90eea..2c1244c5075 100644
--- a/packages/ra-ui-materialui/src/input/DateInput.tsx
+++ b/packages/ra-ui-materialui/src/input/DateInput.tsx
@@ -65,17 +65,22 @@ export const DateInput = ({
     });
     const [renderCount, setRenderCount] = React.useState(1);
 
-    const initialDefaultValueRef = React.useRef(defaultValue);
+    const initialDefaultValueRef = React.useRef(field.value);
 
     React.useEffect(() => {
-        if (initialDefaultValueRef.current !== defaultValue) {
+        const initialDateValue =
+            new Date(initialDefaultValueRef.current).getTime() || null;
+
+        const fieldDateValue = new Date(field.value).getTime() || null;
+
+        if (initialDateValue !== fieldDateValue) {
             setRenderCount(r => r + 1);
             parse
-                ? field.onChange(parse(defaultValue))
-                : field.onChange(defaultValue);
-            initialDefaultValueRef.current = defaultValue;
+                ? field.onChange(parse(field.value))
+                : field.onChange(field.value);
+            initialDefaultValueRef.current = field.value;
         }
-    }, [defaultValue, setRenderCount, parse, field]);
+    }, [setRenderCount, parse, field]);
 
     const { onBlur: onBlurFromField } = field;
     const hasFocus = React.useRef(false);
@@ -99,11 +104,17 @@ export const DateInput = ({
             !isNaN(new Date(target.valueAsDate).getTime())
                 ? parse
                     ? parse(target.valueAsDate)
-                    : target.valueAsDate
+                    : getStringFromDate(target.valueAsDate)
                 : parse
                 ? parse(target.value)
                 : getStringFromDate(target.value);
 
+        // if value empty, set it to null
+        if (newValue === '') {
+            field.onChange(null);
+            return;
+        }
+
         field.onChange(newValue);
     };
 
@@ -130,7 +141,7 @@ export const DateInput = ({
         <TextField
             id={id}
             inputRef={ref}
-            defaultValue={format(defaultValue)}
+            defaultValue={format(initialDefaultValueRef.current)}
             key={renderCount}
             type="date"
             onChange={handleChange}
@@ -199,7 +210,8 @@ const getStringFromDate = (value: string | Date) => {
     // null, undefined and empty string values should not go through dateFormatter
     // otherwise, it returns undefined and will make the input an uncontrolled one.
     if (value == null || value === '') {
-        return '';
+        console.log('toto');
+        return null;
     }
 
     if (value instanceof Date) {
diff --git a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
index d7b7f5e5326..8db246b1bae 100644
--- a/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
+++ b/packages/ra-ui-materialui/src/input/DateTimeInput.tsx
@@ -56,17 +56,22 @@ export const DateTimeInput = ({
     });
     const [renderCount, setRenderCount] = React.useState(1);
 
-    const initialDefaultValueRef = React.useRef(defaultValue);
+    const initialDefaultValueRef = React.useRef(field.value);
 
     React.useEffect(() => {
-        if (initialDefaultValueRef.current !== defaultValue) {
+        const initialDateValue =
+            new Date(initialDefaultValueRef.current).getTime() || null;
+
+        const fieldDateValue = new Date(field.value).getTime() || null;
+
+        if (initialDateValue !== fieldDateValue) {
             setRenderCount(r => r + 1);
             parse
-                ? field.onChange(parse(defaultValue))
-                : field.onChange(defaultValue);
-            initialDefaultValueRef.current = defaultValue;
+                ? field.onChange(parse(field.value))
+                : field.onChange(field.value);
+            initialDefaultValueRef.current = field.value;
         }
-    }, [defaultValue, setRenderCount, parse, field]);
+    }, [setRenderCount, parse, field]);
 
     const { onBlur: onBlurFromField } = field;
     const hasFocus = React.useRef(false);
@@ -121,7 +126,7 @@ export const DateTimeInput = ({
         <TextField
             id={id}
             inputRef={ref}
-            defaultValue={format(defaultValue)}
+            defaultValue={format(initialDefaultValueRef.current)}
             key={renderCount}
             type="datetime-local"
             onChange={handleChange}