Material-ui-pickers: Warning: Failed prop type: Invalid prop `transKey` of type `object` supplied to `SlideTransition`, expected `string`.

Created on 20 Aug 2018 · 16Comments · Source: mui-org/material-ui-pickers

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.13 |
| material-ui | 1.5.1 |
| React | 16.4.2 |
| Browser | Chrome 68.0.3440.106 64bit |
| Platform | Windows 10 client pc, linux centos server |
| Peer library | Moment 2.22.2 |
| babel | @babel/runtime 7.0.0-beta.54 and 55

Steps to reproduce

Copied date picker code for keyboard input
Load site and clicked on the icon button.
The warning appears only once. At every refresh.
Note: this doesn't occur if I pass openToYearSelection to true.

Expected behavior

No warnings.

Actual behavior

Warning: Failed prop type: Invalid prop `transKey` of type `object` supplied to `SlideTransition`, expected `string`.
    in SlideTransition (created by WithStyles(SlideTransition))
    in WithStyles(SlideTransition) (created by CalendarHeader)
    in div (created by CalendarHeader)
    in div (created by CalendarHeader)
    in CalendarHeader
    in WithUtils(CalendarHeader) (created by WithStyles(WithUtils(CalendarHeader)))
    in WithStyles(WithUtils(CalendarHeader)) (created by Calendar)
    in Calendar
    in WithUtils(Calendar) (created by WithStyles(WithUtils(Calendar)))
    in WithStyles(WithUtils(Calendar)) (created by DatePicker)
    in DatePicker
    in WithUtils(DatePicker) (created by RenderPropsComponent)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by ModalDialog)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by ModalDialog)
    in ModalDialog (created by WithStyles(ModalDialog))
    in WithStyles(ModalDialog) (created by ModalWrapper)
    in ModalWrapper (created by RenderPropsComponent)
    in RenderPropsComponent (created by withHandlers(RenderPropsComponent))
    in withHandlers(RenderPropsComponent) (created by lifecycle(withHandlers(RenderPropsComponent)))
    in lifecycle(withHandlers(RenderPropsComponent)) (created by withState(lifecycle(withHandlers(RenderPropsComponent))))
    in withState(lifecycle(withHandlers(RenderPropsComponent))) (created by BasePicker)
    in BasePicker
    in WithUtils(BasePicker) (created by DatePickerWrapper)
    in DatePickerWrapper (created by ForwardRef)
    in div (created by PageHome)
    in PageHome (created by Route)
    in div (created by Mutation)
    in div (created by Mutation)
    in div (created by Mutation)
    in Mutation (created by CompNav)
    in CompNav (created by WithStyles(CompNav))
    in WithStyles(CompNav) (created by WithTheme(WithStyles(CompNav)))
    in WithTheme(WithStyles(CompNav)) (created by Connect(WithTheme(WithStyles(CompNav))))
    in Connect(WithTheme(WithStyles(CompNav))) (created by Route)
    in Route (created by withRouter(Connect(WithTheme(WithStyles(CompNav)))))
    in withRouter(Connect(WithTheme(WithStyles(CompNav)))) (created by withCookies(Component))
    in withCookies(Component) (created by Route)
    in div (created by Route)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Route)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by AppRoutes)
    in Switch (created by AppRoutes)
    in AppRoutes (created by Route)
    in Route (created by withRouter(AppRoutes))
    in withRouter(AppRoutes)
    in App (created by WithRoot)
    in MuiPickersUtilsProvider (created by WithRoot)
    in MuiThemeProvider (created by WithRoot)
    in WithRoot (created by Query)
    in Query (created by Apollo(WithRoot))
    in Apollo(WithRoot) (created by Connect(Apollo(WithRoot)))
    in Connect(Apollo(WithRoot)) (created by Route)
    in Route (created by withRouter(Connect(Apollo(WithRoot))))
    in withRouter(Connect(Apollo(WithRoot)))
    in I18nextProvider
    in CookiesProvider
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in ApolloProvider
    in Provider
    in Provider

Live example

https://codesandbox.io/s/v3n19r93z3

Source

simplecommerce

👍25

Most helpful comment

I have the same Issue,
On my end, openToYearSelection does not actually fix it once you select a year.

Carkib on 21 Aug 2018

👍8

All 16 comments

I have exactly the same issue

yaminyaylo on 21 Aug 2018

👍4

I have the same Issue,
On my end, openToYearSelection does not actually fix it once you select a year.

Carkib on 21 Aug 2018

👍8

I have the same problem, but in my setup it says ‘date’ instead of ‘object’.

ilbrando on 23 Aug 2018

I am getting the same error after update to rc13.

chaoriwei on 24 Aug 2018

Same issue as @ilbrando after updating.

demiters on 24 Aug 2018

Same, fresh install and copied example straight from docs.

tdotholla on 25 Aug 2018

resolved warning by setting prop openTo="date"

tdotholla on 25 Aug 2018

Unless I'm missing something more fundamental, the error seems pretty clear: the transKey prop on the SlideTransition components in Calendar.jsx and CalendarHead.jsx are Date objects(the currentMonth var) when they should be strings. Can be fixed by setting the transKey values with .toString() since the prop-types require strings. Not sure that this is the "proper" resolve though!

Also, I am having difficulty with changing the format value that the date returns. It returns a Date object no matter what where previously I was able to return a string or custom format. Possibly related to this issue?