Material UI datePicker does not focus to a selected date when using initialFocusedDate

I am using Material UI datePicker nad it must have an initial focus date of Oct, 4th, has a minDate of Oct, 4th and a maxDate of Oct, 10th. Additionally, some of the dates between Oct, 4th and Oct, 10th are disabled with shouldDisableDate.

Until this point, everything is working as expected but, I also need to save its selected value to a global state, which I have accomplished using the onChange property.

Now, as soon as I use the onChange property the calendar’s initial focus date changes to today/current date but as I mentioned above it must have an initial focus date of Oct, 4th. And if I try to set up it initial focus date with the initialFocusedDate property, Oct, 4th highlighted but when I select a different date it does not get highlighted/focused.

import React from 'react'
import DateMomentUtils from '@date-io/moment'
import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import { Controller } from 'react-hook-form'
import moment from 'moment'

const CalendarInput = ({ control, name, accessibility, setValues }) => {
  const startDate = moment('October 4, 2021')
  let endDate = moment('October 18, 2021')

  if (accessibility === true) {
    endDate = moment('October 10, 2021')
  }
  const skipDates = (date) => {
    return moment(date).format('DD') > 10 && moment(date).format('DD') < 18
  }

  return (
    <MuiPickersUtilsProvider utils={DateMomentUtils}>
      <Controller
        require
        name={name}
        control={control}
        render={({ field: { ref, ...rest } }) => (
          <KeyboardDatePicker
            autoOk
            variant='static'
            id='date-picker-dialog'
            label='Pick a date *'
            format='MM/DD/YYYY'
            KeyboardButtonProps={{
              'aria-label': 'change date'
            }}
            {...rest}
            minDate={startDate}
            maxDate={endDate}
            shouldDisableDate={skipDates}
           //Here is where thing start not working as expected 
            onChange={(event, x) => {
               setValues({ selectedDate: x })
            }}
            initialFocusedDate={startDate}
          />
        )}
      />
    </MuiPickersUtilsProvider>
  )
}

export default CalendarInput

Any ideas, what am I missing?

Answer

You’re overwriting the onChange prop, which was initially set with RHF’s onChange handler via the spread of {...rest}. So in your onChange callback from the <KeyboardDatePicker /> you should also call RHF’s onChange.

<Controller
  require
  name={name}
  control={control}
  defaultValue={startDate}
  render={({ field: { ref, onChange, ...rest } }) => (
    <KeyboardDatePicker
      autoOk
      variant="static"
      id="date-picker-dialog"
      label="Pick a date *"
      format="MM/DD/YYYY"
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
      {...rest}
      minDate={startDate}
      maxDate={endDate}
      shouldDisableDate={skipDates}
      onChange={(event, x) => {
        setValues({ selectedDate: x });

        onChange(x);
      }}
      initialFocusedDate={startDate}
    />
  )}
/>

Please note the destructered RHF’s onChange in the render prop callback from <Controller />, which is used in the onChange prop of the <KeyboardDatePicker />.

You should also set a defaultValue for your field, from the documentation:

You need to either provide defaultValue at the field-level or useForm with defaultValues.

I set it with the startDate in code example above.