Fix(input) Refactor date and time input handling

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

Hide file tree

Showing 2 changed files with 39 additions and 22 deletions.
diff --git a/packages/ra-ui-materialui/src/input/DateInput.tsx b/packages/ra-ui-materialui/src/input/DateInput.tsx
@@ -35,7 +35,6 @@ export const DateInput = ({
     defaultValue,
     format = getStringFromDate,
     label,
-    name,
     source,
     resource,
     helperText,
@@ -56,7 +55,6 @@ export const DateInput = ({
         isRequired,
     } = useInput({
         defaultValue,
-        name,
         onBlur,
         resource,
         source,
@@ -65,17 +63,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 +102,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);
     };
 
@@ -124,13 +133,16 @@ export const DateInput = ({
     const renderHelperText =
         helperText !== false || ((isTouched || isSubmitted) && invalid);
 
-    const { ref } = field;
+    const { ref, name } = field;
+
+    console.log('field', field);
 
     return (
         <TextField
             id={id}
+            name={name}
             inputRef={ref}
-            defaultValue={format(defaultValue)}
+            defaultValue={format(initialDefaultValueRef.current)}
             key={renderCount}
             type="date"
             onChange={handleChange}
@@ -199,7 +211,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
@@ -26,7 +26,6 @@ export const DateTimeInput = ({
     defaultValue,
     format = formatDateTime,
     label,
-    name,
     helperText,
     margin,
     onBlur,
@@ -47,7 +46,6 @@ export const DateTimeInput = ({
         isRequired,
     } = useInput({
         defaultValue,
-        name,
         onBlur,
         resource,
         source,
@@ -56,17 +54,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);
@@ -115,13 +118,14 @@ export const DateTimeInput = ({
     const renderHelperText =
         helperText !== false || ((isTouched || isSubmitted) && invalid);
 
-    const { ref } = field;
+    const { ref, name } = field;
 
     return (
         <TextField
             id={id}
             inputRef={ref}
-            defaultValue={format(defaultValue)}
+            name={name}
+            defaultValue={format(initialDefaultValueRef.current)}
             key={renderCount}
             type="datetime-local"
             onChange={handleChange}