Fix(input) Refactor date and time input handling

marmelab · Dec 22, 2023 · 355d240 · 355d240
1 parent e32f946
commit 355d240
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git 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
@@ -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}