arqex / react-datetime

A lightweight but complete datetime picker react component.
1.99k stars 872 forks source link

Console spammed with Invalid date passed to the `setViewDate` #851

Open mmatuk opened 1 year ago

mmatuk commented 1 year ago

I'm Submitting a ...

[ X] Bug report
[ ] Feature request
[ ] Support request

Steps to Reproduce

Having a controlled DateTime with a value prop spams the console log with warning messages as the user types into the input field.

Expected Results

Do not spam warning messages. Instead there should be a single warning once the user is finished typing a date out. It should be expected the the first character, or first couple of characters, in a date string would not be a valid date. So if the user types "12/12/2023", I should not see a warning message for every character until the user is finished the entire date and has left the input with an onBlur event .

Actual Results

You see this being spammed in the console log after every character change as the user types.

image

Minimal Reproduction of the Problem

Go to the sandbox, type into the date field and watch the console logs.

https://codesandbox.io/s/react-datetime-invalid-date-warning-sp7fvt

Other Information (e.g. stacktraces, related issues, suggestions how to fix)

Looks to be caused by the setViewDate function being called every time a user types in the input. This means it getting called with invalid dates since the user has not finished typing. Maybe instead only fire this function once the user blurs the input or add some debouncing to the input to prevent warning messages that are not helpful.