Material-ui-pickers: value in TextField input not update

[daitonaaa]

THANK YOU FOR LIBRAY!!!!!!

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 3 |
| material-ui | 4 |
| React | 16 |
| Browser | chrome |
| Peer library | moment | |

Steps to reproduce

1. Create and include custom input (TextFieldComponent) in KeyboardDatePicker
2. Set value and functions onBlue and onChange in props TextFieldComponent
3. In handleChange function set _d prop from object date and validate date. If date is valid then external onChange will be executed
4. When onBlur function will be executed then _d prop validate date constraint. If date is not valid then execute external onChange with previous result;

Expected behavior

In 4 step input value changed.

Actual behavior

It is changed only in first time when i input not valid date in blank input field,

Expected behaviour works only if input field was blank. If input was filled then external value and value, which i set in picker are updated, but in input field value not updated

GIST CODE My picker component https://gist.github.com/daitonaaa/747aacea9e04ebc3b32ba742f9b76aec

Good luck!!!

[daitonaaa]

@dmtrKovalenko Hi. dmtrKovalenko

Let's briefly again, the component has a value and I pass it to KeyboardDatePickerProps but inside the TextFieldComponent the props value is not updated

[dmtrKovalenko]

Please try to reproduce this one more time at codesandbox.com. I hope it is fixed in v3.1.1 but not really sure

[daitonaaa]

@dmtrKovalenko
Hi! Thanks for answering!

https://codesandbox.io/s/mycustompicker-nlhxd

Enter incorrect values in the field. While in the component MyCustomPiсker the value changes to the original, one in yours it remains incorrect

See console log

[dmtrKovalenko]

I cannot understand your problem :D
Please describe it more lightweight without additional code. And make sure you are not overriding any passed from picker props. Like onChange

[daitonaaa]

@dmtrKovalenko https://drive.google.com/file/d/1wRgHiADmA1uT5Mc0bs56j5mnqiTuLKmG/view
look, I pass the value to your component, if the value is not correct I set either today or the last correct one. The first time it works, the second no

[dmtrKovalenko]

Ok. I figured that out. Issue here is that you are actually not changing date. Here on line 65 you are doing

const newValue = value || new Date();

So for the second time you are leaving value the same! So inner picker won't understand that actually passed value was changed. For example if you will do const newValue = new Date() it will work because it receive actually new value each time

Here is sandbox: https://codesandbox.io/s/mycustompicker-slo8n

[dmtrKovalenko]

What you can do. You can try controlling the datepicker over the pure date string. You can pass string right in the inputValue and control the picker with it. So you will be able update the value as you wish.

Or you can try to change you value. I know that it can be a little tricky, because we are using equality check when updating the date. So it will not be possible to just clone the value. But adding 1 millisecond should work (obviously this is not neat solution)

[daitonaaa]

hi @dmtrKovalenko

Thanks for the answer and for the options! It really helped me!
It helps only if you change the minutes, seconds and milliseconds do not work

Tell me how to align the calendar to the bottom of the input. Is this somehow related to archorEl?

[ChanaKra]

If you want to align the calendar to the input, you need to pass in the InputProps ref: props.inputRef.
https://codesandbox.io/s/mycustompicker-6mxk3

[daitonaaa]

Thank you @ChanaKra !!