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

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

  1. Copied date picker code for keyboard input
  2. Load site and clicked on the icon button.
  3. The warning appears only once. At every refresh.
  4. 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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 25
  • Comments: 16 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

Fixed in rc.14

@andres-amor This will be fixed in the next release. Tomorrow I hope

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?

I have exactly the same issue

@mberneti impossible. Can you reproduce that on code sandbox?