Fix date inputs are broken on Safari

packages/ra-core/src/form/useInput.ts

@@ -37,6 +37,7 @@ export interface UseInputValue extends FieldRenderProps<any, HTMLElement> {
 
 const useInput = ({
     defaultValue,
+    initialValue,
     id,
     name,
     source,
@@ -67,7 +68,7 @@ const useInput = ({
         : validate;
 
     const { input, meta } = useFinalFormField(finalName, {
-        initialValue: defaultValue,
+        initialValue: initialValue || defaultValue,
         validate: sanitizedValidate,
         ...options,
     });
@@ -79,7 +80,6 @@ const useInput = ({
     const handleBlur = useCallback(
         event => {
             onBlur(event);
-
             if (typeof customOnBlur === 'function') {
                 customOnBlur(event);
             }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent } 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';
@@ -14,7 +14,7 @@ import InputHelperText from './InputHelperText';
  * @returns {String} A standardized date (yyyy-MM-dd), to be passed to an <input type="date" />
  */
 const convertDateToString = (value: Date) => {
-    if (!(value instanceof Date) || isNaN(value.getDate())) return;
+    if (!(value instanceof Date) || isNaN(value.getDate())) return '';
     const pad = '00';
     const yyyy = value.getFullYear().toString();
     const MM = (value.getMonth() + 1).toString();
@@ -44,8 +44,10 @@ const getStringFromDate = (value: string | Date) => {
     return convertDateToString(new Date(value));
 };
 
-const DateInput: FunctionComponent<DateInputProps> = ({
+const DateInput = ({
+    defaultValue,
     format = getStringFromDate,
+    initialValue,
     label,
     options,
     source,
@@ -59,14 +61,19 @@ const DateInput: FunctionComponent<DateInputProps> = ({
     validate,
     variant = 'filled',
     ...rest
-}) => {
-    const {
-        id,
-        input,
-        isRequired,
-        meta: { error, submitError, touched },
-    } = useInput({
+}: DateInputProps) => {
+    const sanitizedDefaultValue = defaultValue
+        ? format(new Date(defaultValue))
+        : undefined;
+    const sanitizedInitialValue = initialValue
+        ? format(new Date(initialValue))
+        : undefined;
+
+    const { id, input, isRequired, meta } = useInput({
+        defaultValue: sanitizedDefaultValue,
         format,
+        formatOnBlur: true,
+        initialValue: sanitizedInitialValue,
         onBlur,
         onChange,
         onFocus,
@@ -77,10 +84,23 @@ const DateInput: FunctionComponent<DateInputProps> = ({
         ...rest,
     });
 
+    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 || ''}
             variant={variant}
             margin={margin}
             type="date"

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent } 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';
@@ -65,8 +65,10 @@ const parseDateTime = (value: string) => new Date(value);
 /**
  * Input component for entering a date and a time with timezone, using the browser locale
  */
-const DateTimeInput: FunctionComponent<DateTimeInputProps> = ({
+const DateTimeInput = ({
+    defaultValue,
     format = formatDateTime,
+    initialValue,
     label,
     helperText,
     margin = 'dense',
@@ -80,14 +82,18 @@ const DateTimeInput: FunctionComponent<DateTimeInputProps> = ({
     validate,
     variant = 'filled',
     ...rest
-}) => {
-    const {
-        id,
-        input,
-        isRequired,
-        meta: { error, submitError, touched },
-    } = useInput({
+}: DateTimeInputProps) => {
+    const sanitizedDefaultValue = defaultValue
+        ? format(new Date(defaultValue))
+        : undefined;
+    const sanitizedInitialValue = initialValue
+        ? format(new Date(initialValue))
+        : undefined;
+
+    const { id, input, isRequired, meta } = useInput({
+        defaultValue: sanitizedDefaultValue,
         format,
+        initialValue: sanitizedInitialValue,
         onBlur,
         onChange,
         onFocus,
@@ -99,10 +105,23 @@ const DateTimeInput: FunctionComponent<DateTimeInputProps> = ({
         ...rest,
     });
 
+    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 || ''}
             variant={variant}
             margin={margin}
             error={!!(touched && (error || submitError))}