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
- 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
openToYearSelectiontotrue.
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
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 25
- Comments: 16 (3 by maintainers)
Commits related to this issue
- [#589] Fix invalid prop "transKey" warning — committed to mui/material-ui-pickers by dmtrKovalenko 6 years ago
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
transKeyprop on theSlideTransitioncomponents inCalendar.jsxandCalendarHead.jsxare Date objects(thecurrentMonthvar) when they should be strings. Can be fixed by setting thetransKeyvalues 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?