Material-ui-pickers: Should onChange fire on keyboard input?

[derekcannon]

The API specified onChange "[fires] when date accepted." I have verified this is true when selected values in the picker modal. But it doesn't not work on keypress when the keyboard prop is used.

Is this intentional? If so, what is the appropriate prop for onChange for the actual input field?

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.10 |
| material-ui | 1.0.0 |
| React | 16.3.4 |
| Browser | Any |
| Platform | MacOS |

[dmtrKovalenko]

For now keyboard input parses to date only on blur. Thus we cannot accept it before date is parsed from string.

[Mairu]

With 1.0.0-rc.10 the keyboard mode is broken (for empty fields) ...:

• open https://material-ui-pickers.firebaseapp.com/demo/datepicker
• clear one of the keyboard fields
• focus another field
• focus one of the keyboard fields and try to type something

[derekcannon]

@dmtrKovalenko does that mean the onChange should fire after the field blurs? I do not see that to be the case with 1.0.0-rc.10. And I do not see a onBlur function listed in the API. Could this be a bug?

[dabyland]

Currently having some troubles with this at the moment. When I first enter an "Invalid format" for date, it doesn't validate it. It will however after entering a proper value. It's essentially not validating until a valid date has been added. Is this expected/is there a workaround?

See gif here

[jazeee]

I observe the keyboard issue as well.
Documented as bug #495

[kyledgreen]

This is an issue for me as well, I would expect onChange to behave normally and trigger every time input is detected. Right now it acts more like a onValidDateEnteredAndFocusLost event...

I need to be able to handle some additional validation on input change. Is there a workaround for this, like attaching an event listener inside the DatePicker component?

Specifically, I'm using two DatePickers to create a start - end date picker and I want to validate that the startDate <= endDate, but due to the way onChange is implemented I can only validate on valid date change after a focus loss and valid date entry. This being an issue because it wont remove the error state even if they've fixed the range until focus changes.

[dmtrKovalenko]

@kleydgreen you can try the prop inputProps={{ onChange: console.log }}

I am not fully sure that it will work. But you can try

[alex-fournier]

@dmtrKovalenko The trick does nothing (inputProps is overriden in DateTextField). We really need a way to get an onChange callback called on accepted date without blurring the field (as it was working before). We're stick to rc-9 until we find a solution.

[dmtrKovalenko]

onInputChange was introduced

[jsnavarroc]

onInputChange, does it take values ​​different from onChange?
img --> https://ibb.co/nQk7vpw