React-dates: DateRangePicker freeze when I select a large range and try to enter a value

[pshoniuk]

This can be reproduced in the live playground:

• select a large range, for example from 01/01/2018 to 01/01/2500
• try to enter a value

[ljharb]

I suspect this is because we have to determine if each intervening day is blocked. I’m not sure what the use case is for the year 2500 tho :-)

[pshoniuk]

The user may be mistaken when entering the date. In my opinion, such a mistake should not have such serious consequences.

[ljharb]

I suppose we could cap the range at a year, with a prop to override.

[conartist6]

@ljharb That will not work. The use case that triggers this bug is incredibly simple. Just be naive enough to try to backspace out the date. After the first keystroke you'll be in the year 201, and most browsers will do a hard lockup for at least 20s.

[conartist6]

Why would the component try to fill in every intervening day at all? As a strategy wouldn't it be far more sensible to just record the date that starts block and the date that ends blocking (probably in a days since unix epoch integer) and then just render the day with the blocked class name if it's between the two numbers?

It's pretty outlandish what the code actually does, including cloning a copy of every day for the last 2000 years like 30 times over.