hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.59k stars 672 forks source link

Date input doesn't work as expected when editableDateInputs is enabled #366

Open lukeupup opened 4 years ago

lukeupup commented 4 years ago

Subject of the issue

When editableDateInputs is set to true on DateRange component, there's two editable date inputs above the calendar. However, each input will both change start date and end date, which is very confusing.

[BUG] Bug Reproduce Steps

  1. Here's a demo code: https://codesandbox.io/s/icy-http-c6ibn?fontsize=14&hidenavigation=1&theme=dark at the beginning, we have a selected date range 2020-04-05 to 2020-04-15

  2. There will be two date inputs on the UI. Fill date '2020-04-03' in the first input then press Enter. Current behavior is - both input is set to 2020-04-03, and the previous selected range is cleared, the new range is only 2020-04-03.

  3. Still in the first input, fill '2020-04-22' and press Enter. The current behavior is - both input is set to 2020-04-22, and the date range is 2020-04-03 to 2020-04-22 now.

  4. Try the same operation in the second input, the behavior is similar. Actually the current behavior the input date is more like triggering a click event on a date, no matter which input we are using.

[BUG] Expected behaviour

The first input only adjust the startDate, and the second input only adjust the endDate.

If the date in the first input is later than the second one, They should be switched to make sure the first date is earlier. No other cases that the dates should impact each other.

The change on the date inputs should end a ongoing mouse selection. However the value in the input should be applied.

Environment

Package Version: 1.0.3 React version: 16.12.0 Node version: N/A Browser: All