Material-ui-pickers: Month can't be changed when DatePicker is inside of FormControl element

[ivan-nikitovic]

Environment

"react-dom": "16.2.0",
"react": "16.2.0",
"moment": "2.20.1",
"material-ui-pickers": "latest",
"material-ui": "1.0.0-beta.30"

Steps to reproduce

1. Put DatePicker inside of FormControl component
2. Try to pick a date in month before or after the currently selected one

Expected behavior

Month can be changed

Actual behavior

Selection is forced to the currently selected month

Live example

https://codesandbox.io/s/14kk1py3jl

[kewl8]

I have encountered the same problem and I noticed the below warning which may hopefully provides some clue:

index.js:2177 Warning: Failed prop type: The prop 'inputRef' is marked as required in 'Input', but its value is 'undefined'.
in Input (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by TextField)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by TextField)
in TextField (created by DateTextField)
in DateTextField (created by WithStyles(DateTextField))
in WithStyles(DateTextField) (created by ModalWrapper)
in ModalWrapper (created by DatePickerWrapper)
in DatePickerWrapper (at Inventory.js:246)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (at Inventory.js:244)
in div (created by Grid)
in Grid (created by GridWrapper)
in GridWrapper (created by WithStyles(GridWrapper))
in WithStyles(GridWrapper) (at Inventory.js:243)
in div (created by Grid)
in Grid (created by GridWrapper)
in GridWrapper (created by WithStyles(GridWrapper))
in WithStyles(GridWrapper) (at Inventory.js:197)
in div (at Inventory.js:174)
in Inventory (created by WithStyles(Inventory))
in WithStyles(Inventory) (created by Connect(WithStyles(Inventory)))
in Connect(WithStyles(Inventory)) (at App.js:228)
in main (at App.js:381)
in div (at App.js:278)
in div (at App.js:268)
in App (created by WithStyles(App))
in WithStyles(App) (created by Connect(WithStyles(App)))
in Connect(WithStyles(App)) (at index.js:22)
in Provider (at index.js:21)

[ivan-nikitovic]

@kewl8 It's actually related to this. https://github.com/dmtrKovalenko/material-ui-pickers/issues/203

@cherniavskii This line is causing issue https://github.com/mui-org/material-ui/blob/v1-beta/src/Form/FormControl.js#L103, hope this gives you a clue about what's wrong.

[gigitux]

Any ideas for a workaround?

[TheRusskiy]

@gigitux I ended up doing an ugly hack where I copied source code from FormControl (https://github.com/mui-org/material-ui/blob/v1-beta/src/Form/FormControl.js) into my own FormControlNoBlur and there I overwrote the method with handleBlur = event => {}.
Looks awful but gets the job done until the provide an api to skip blur.
Thanks @ivan-nikitovic for pointing out the issue.

[dmtrKovalenko]

https://github.com/dmtrKovalenko/material-ui-pickers/issues/217
Changing the wrapper from a FormControl to a InputLabel fixes the issue