如何使用 react-hook-form 为 KeyboardDatePicker 设置条件默认值？

Question

I have a form that contains a KeyboardDatePicker from material UI and I want it to have an empty string value ( "" ) as default value when no value is passed to the useForm hook for this field.

Here's my implementation so far:

The date picker input field:

                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <Controller
                        name="date"
                        control={control}
                        rules={{ required: true }}
                        defaultValue={getValues().date || ""}
                        as={
                            <KeyboardDatePicker
                                autoOk
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                margin="normal"
                                id="date-picker-inline"
                                label="Date"
                                placeholder="yyyy-mm-dd"
                                required
                                error={!!errors.date}
                                helperText={errors.date && "Incorrect entry."}
                                onChange={() => {}}
                                value={() => {}}
                                KeyboardButtonProps={{
                                    "aria-label": "change date",
                                }}
                            />
                        }
                    />
                </MuiPickersUtilsProvider>

And here's my hook for the form:

const { handleSubmit, getValues, control, register, errors, setValue } = useForm<Project>({
    submitFocusError: false,
    mode: "onBlur",
    defaultValues: project,
});

I am setting the default values of my form with a project but project can be null or undefined and the date property of project can also be null . If that's the case I want the default value to be an empty string.

Sadly, with this implementation, when I select a date from an empty field to a Date I get a warning telling me that I should not be changing an uncontrolled input of type text to controlled one and the label of the input stack above the value:

Is it even possible to have an empty string as the default value for a DatePicker without breaking everything? If it's possible how should it be implemented?

Answer 1

A moment ago I had a similar situation and solved it by initially setting defaultValue AND initialFocusedDate to null on my Controller .

  const [helperText, isError] = useHelperText(name, errors);
  const defaultValue = useDefaultValue(getValues, name, watch);

  return (
    <Controller
      name={name}
      rules={isRequired}
      control={control}

      // here the magic happens
      initialFocusedDate={null} 
      defaultValue={null} 

      as={
        <KeyboardDatePicker
          disableFuture
          {...rest}
          name={name}
          error={isError}
          helperText={helperText}
          required={Boolean(isRequired?.required)}
          disableToolbar
          variant="inline"
          inputVariant={rest.variant}
          format="dd.MM.yyyy"
          id={name}
          label={label}
          invalidDateMessage=""
          KeyboardButtonProps={{
            "aria-label": "change date",
          }}
        />
      }
    />
  );

This way, if no defaultValues are present from useForm , the component displays an empty MUI-input.

Answer 2

In order to make an empty value for datepicker you need to pass null as a default value. This codesandbox confirms this behavior https://codesandbox.io/s/relaxed-poitras-5eohr?file=/src/App.jsx

Your problem is with incorrect usage of this 2 values

  onChange={() => {}}
  value={() => {}}

These values should accept exactly value of the form input and the callback to change this value without event.