UI and state inconsistent when portion of the time is deleted

[emilyuhde]

When a TimePicker has a valid time entered, then a portion of the time is deleted, the value returned from the time picker is still the last valid date. This is causing inconsistencies between the UI and the state. If the invalid value was returned instead, then it would be easier to do form validation with the time picker component. Right now, the event that the onChange handler captures is only valid times. For example, if the time picker shows [1]:[--][PM] the value/event could be '13:--'.

Standard time picker:

Required time picker:

I'm using the time picker component like this:

import React from 'react';
import { default as ReactTimePicker } from 'react-time-picker';

class ReactTimePickerExample extends React.Component {
    state = {
        time: '13:15',
    }
    onChange = time => this.setState({ time })

    render() {
        const {
            ...rest
        } = this.props;

        return (
            <div>
                <ReactTimePicker
                    onChange={this.onChange}
                    value={this.state.time}
                    {...rest} />
                The selected time is {this.state.time}
            </div>
        );
    }
}

[wojtekmaj]

Yeah, React-Time-Picker supports two "states":

• All fields filled correctly
• No fields filled

In both cases, onChange will be triggered. No onChange will be triggered on e.g. 13:98 because what should we do with it?

[wojtekmaj]

This is almost consistent with native time input - which doesn't trigger onChange for "--:30", "12:--". Native input also would disallow writing something like "12:90" which will also be done in the next React-Time-Picker update.

[emilyuhde]

That makes sense, something like 12:98 is not a valid time. It's cumbersome to check the validity with the way it's implemented currently, so I'm wondering if it's possible to do something to make it easier to know if you're in an invalid state. Maybe something like an indeterminate state?

My use case is that if I want to have a form where the user enters a time, they enter a valid time and then delete part of the time (like in the images I included), the onChange is not triggered so the last valid time they entered is the one stored on the state. It would be helpful to know if what is currently entered into the TimePicker is not valid so that if they try to submit the form an error message can be given.

This is how I currently need to check the validity, by looking at all the underlying inputs/select. (I'm wrapping your TimePicker and adding some styling to it, that's where the uuid is being added.)

const x = document.getElementById(this.state.uuid).children[1].children[0].children[0].children; 
        let invalid;

        if ((x.hour24 && !x.hour24.checkValidity()) || (x.hour12 && !x.hour12.checkValidity()) || !x.minute.checkValidity() || !x.amPm.checkValidity()) {
            invalid = true;
        }
        else {
            invalid = false;
        }
        console.log('invalid ' + invalid);

[wojtekmaj]

I've noticed that native time picker triggers onChange with empty value if I type 12:34 and erase the minutes part, to 12:--. I suppose we should also do that. That's not going to be easy, because we're trying to keep native and non-native input in sync, otherwise it's going to cause a lot of problems.

Even if, not sure if this would change anything in your case; I think checkValidity() is a very safe bet.

[emilyuhde]

I ended up creating a wrapper file around the react-time-picker (to customize styling and some functionality) and added a callback function isInvalid which will return a Boolean to let the consumer of the TimePicker know if any of the parts of the time are invalid or not. This is just using checkValidity() on all the pieces of the TimePicker inside my wrapper file. If true is returned, then the consumer knows they need to disallow form submission, discard the value since it's not up to date, or do something else.

It works, but it isn't the simplest implementation since I would expect onChange would let me know of any changes at all, good or bad.

[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.