Material-ui-pickers: Uncaught TypeError: Cannot read property 'length' of undefined

[ChristianSaboia]

An Uncaught typeError is generated when typing a date.

Environment

"@date-io/luxon": "1.x",
"@date-io/moment": "1.x",
"@material-ui/core": "^4.0.0-rc.0",
"@material-ui/icons": "latest",
"@material-ui/lab": "^4.0.0-alpha.43",
"@material-ui/pickers": "^3.2.10",
"@types/moment": "^2.13.0",
"axios": "^0.19.1",
"classnames": "latest",
"dotenv": "^8.2.0",
"luxon": "^1.22.0",
"moment": "^2.24.0",
"next": "latest",
"next-cookies": "^2.0.3",
"next-images": "^1.3.0",
"next-redux-wrapper": "latest",
"prop-types": "^15.7.2",
"react": "latest",
"react-cookie": "^4.0.3",
"react-dom": "latest",
"react-hook-form": "^4.9.3",
"react-redux": "latest",
"redux": "latest",
"redux-thunk": "latest",
"tinycolor2": "^1.4.1",
"yup": "^0.28.1"

The same behavior happens either using Moment or Luxon utils.

Steps to reproduce

<MuiPickersUtilsProvider utils={LuxonUtils}>
  <DatetimePicker
    {...props}
    id={id}
    name={name}
    label={label}
    format={format}
    value={selectedDate}
    onChange={handleDateChange}
    inputRef={inputRef}
  />
</MuiPickersUtilsProvider>

1. 
   
   1. 3.
   
   

Expected behavior

Typing a new date should not trigger any error.

Actual behavior

The error is being triggered by direct typing (it doesn't happen when picking a date from the picker dialog.
The error is shown in the console and hinders performance.
Error Stack:

Uncaught TypeError: Cannot read property 'length' of undefined
    at Rifm._this._handleChange (rifm.esm.js:28)
    at handleChange (InputBase.js:330)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
    at executeDispatch (react-dom.development.js:584)
    at executeDispatchesInOrder (react-dom.development.js:609)
    at executeDispatchesAndRelease (react-dom.development.js:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.development.js:692)
    at runEventsInBatch (react-dom.development.js:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js:880)
    at handleTopLevel (react-dom.development.js:5803)
    at batchedEventUpdates$1 (react-dom.development.js:24401)
    at batchedEventUpdates (react-dom.development.js:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js:5894)
    at attemptToDispatchEvent (react-dom.development.js:6010)
    at dispatchEvent (react-dom.development.js:5914)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at discreteUpdates$1 (react-dom.development.js:24417)
    at discreteUpdates (react-dom.development.js:1438)
    at dispatchDiscreteEvent (react-dom.development.js:5881)

Thanks in advance.

[oliviertassinari]

@ChristianSaboia Try upgrading to the latest versions of these packages.

[ChristianSaboia]

Thanks, @oliviertassinari
I've tried with @next and @latest for pickers, mui-core and luxon/moment libs and date-io.
The documentation states that @date-ioluxon should be @1.x. The latest version breaks the compilation. Besides the trouble of adjusting the imports, it does not solve the problem. Is there any thread already addressing this issue?
Also, KeyboardDatePicker is not exported (nor defined) in the next branch.
It is available only up to 3.2.10 version.
I' d really appreciate any help, since I'm stuck on this issue and mui-pickers seems to be my only choice here.

[oliviertassinari]

You will find better help on StackOverflow. I think that we should only worry about bug and feature reports based on the latest version on GitHub.

[ChristianSaboia]

I understand. Thank you.

[azhil]

@ChristianSaboia, what's the initial value that you pass down to the component? I had the same problem when I was passing down an empty string. Changing it to null or to a Date object fixed the issue. Not sure about the error though - if it is expected or not. In the docs, it is stated that the value should be of a ParsableDate type.

[ChristianSaboia]

@azhil The initial values was either null or Date.
I have found a way to deal with this issue, changing the lib version in package.json. With alpha.1 the error is not triggered. See below an extract from package.json:

    "@date-io/luxon": "^2.1.0",
    "@material-ui/core": "^4.9.4",
    "@material-ui/icons": "latest",
    "@material-ui/lab": "^4.0.0-alpha.43",
    "@material-ui/pickers": "^4.0.0-alpha.1",

Thank you for your reply!

[ChrisWiles]

I got the exact same error by passing an empty string as the date value. Fixed it by passing null instead

[ar4hc]

got this In combination with react-form-hooks:

      <Controller
        {...other}
        control={control}
        name={name}
        render={(props) => (
          <KeyboardDatePicker
            onChange={() => null} 
            defaultValue={props.value || null}
            value={null} // <==  this was '' and broke it    ###############################
          />
        )}
      />

(some stuff removed...)

changing value prop from empty string to null fixed it.

Which is strange as RHF should use defaultValue...