onChange behaviour

[ivanfr90]

Hi!

Reading the documentation the onChange event is fired only when a valid time is inserted. This could be correct, but when I delete only the minutes, the onChange event is not fired (because time is not valid), keeping in this conjuncture the last valid value saved.

For example:
First, I write 02:45, time is valid so onChange is fired --> state.time = '02:45'

Later, I delete only minutes, 02:--, time is invalid so onChange is not fired --> state.time = '02:45'. In this case, current time is not correct so state.time has the last valid time, but the input is wrong.

How it could be detected when a invalid time is inserted?

Thank you!

[wojtekmaj]

Observing the behaviour of the native time picker implemented in some modern browsers, partially clearing an input so that it's invalid (like you did) should fire onChange event with empty value. I'll consider this a bug since I strive to get a near-native experience here.

[wojtekmaj]

Okay, I've done some research and it seems like native time input onChange behaviour just doesn't work with React very much. onChange sending empty values when it's only partially empty causes even the native time picker to clear if it's a controlled input
Given that, I'll implement support for attaching event listeners to all inputs (you can do that now but putting the picker in a wrapper which has these listeners, but that's not too obvious behaviour). On an event like keyup you'll be able to verify on your own whether the inputs are empty or not.

[ivanfr90]

I see that you are looking for a similar experience to native input time. I will try to give you my perspective :

onChange event should be fired when:

• Time is correct. When will time be correct? Always if a complete time is setted: hours field, minutes field, and (if has seconds) seconds fields are filled (*). The value will be a valid time.
• Any field is deleted. An onChange event will be fired without value. The value will be empty.

(*) Could an user input a wrong or non-existent time? Definitely, no.

The explanation it's that native input type time never allows user to set incorrect hours or minutes.
The process works as follows:

1. We have an empty input:
   
2. User puts focus on hours and set one number, for example 1:
   
   Automatically the native behavior is to skip to minutes (personally I don't like this, because if I want two set an hour of two digits, always I have to return to hours field and put focus again on it).
3. Following with the hour field.
   • If user sets another valid digit the hour field is completed and lost focus, skipping to minutes:
     
   • If user sets an invalid digit the hour fields keep the previous valid digit and skip to minutes. For example I try to add the digit 3:
     

In summary the behavior is'ts easy: native input time start adding digits from right to left. If an attempt to set an invalid number is detected, automatically the digit is rejected.

[wojtekmaj]

Here's the deal. Native time picker behavior in React is, in my opinion, fundamentally broken when used as a controlled input and trying to erase the value. The solution that React-Time-Picker uses is a compromise between handling it as closely as possible and not screwing it up badly for those who prefer controlled inputs.

Try and erase minutes from the first and the second input:
https://jsfiddle.net/xk4breyz/

For now, I'm adding ability to attach event listeners directly to <TimePicker />, which hopefully will enable you to listen for changes better and find invalid values. I'm not planning to to any major revamp of how onChange works.

Regarding auto-jumping from one field to another, I definitely think that would be a great addition. You can use arrow keys and : to jump between the fields right now, but that would be very nice indeed.

[chinnasamya-tudip]

Hi @wojtekmaj,
I used this to handle the invalid date.

  onChange(event) {
    if (event.target.value.length) {
  	  this.setState({ value: event.target.value })
    }
  }

** e.target.value.length==0 when enetering the backspace**
e.target.value will not change when entering the backspace. Might be it will helpfull for you.

[reverie]

@wojtekmaj Here's a proposal. Accept a new prop fullValue where the user can pass in an object with 'hour' and 'minute' values, possibly null. (The value and fullValue props would be mutually exclusive.) Add a similar onFullChange callback.

This way, users could wrap TimePicker and pass the reconstructed time they want up to my parent component, such as null if any fields are null, without ruining the state of the time picker.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[agnieszka-puzio]

@wojtekmaj any updates on this? Are those listeners implemented?