pushtell / react-bootstrap-date-picker

React-Bootstrap based date picker.
MIT License
346 stars 195 forks source link

onChange is not called if user removes date via text input manually #126

Open sankho opened 7 years ago

sankho commented 7 years ago

If the user uses the text input and manually erases the date, onChange is never called to reflect this, leaving undefined / false values as possibly undetectable.

Expected Behavior

  1. If the text input is manually cleared, onChange should be called with undefined values.
  2. If the text input contains an invalid date, it could perhaps return an error saying so.

Current Behavior

  1. If the text input is manipulated to contain an invalid date, or no date at all, the onChange event never fires.

Steps to Reproduce (for bugs)

  1. attach a console statement to the onChange handler to verify it runs
  2. choose a date using the date picker.
  3. using the text input manually alter the date - invalid values or blank values won't trigger onChange

reactbootstrapdatepicker

Context

Although there is the "x" button, users still get confused as to why clearing out the date manually doesn't work.

Your Environment

sankho commented 7 years ago

just covering my bases here but sorry if I'm being dumb and just missing some obvious option. Thanks!

p4sI commented 6 years ago

There is the onBlur()-function which you could use to detect if the user leaves focus and then do a manual check of the value.

...
value={this.state.date}
onBlur={(e) => {
        const typedDate = new Date(e.target.dataset.formattedvalue);
        this.setState({date: typedDate})
}}
...

Don't forget to check if the new Date is invalid. Could happen if the user enteres something like "2018/01//////23425345"

ekaitzht commented 6 years ago

@p4sI if user clicks a button directly after fill the datepicker onBlur never is going to be trigger.