search

hypeserver / react-date-range

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

The calendar doesn't scroll to the selected date (date range) position #397

Closed nalini-bhati closed 3 years ago

nalini-bhati commented 4 years ago

Subject of the issue

The calendar doesn't scroll to the selected date (date range) position if we select the next/previous month of the current date.

[BUG] Bug Reproduce Steps

I setup a calendar component with some configuration on

https://codesandbox.io/s/jolly-dream-74bss?file=/src/App.js

If you change dates in componentDidMount and set to sept(next month to the current date). it will not scroll but if you set oct(2nd month from current month). it will scroll. note: This is happening only when we set the state of the date range in componentDidMount. startDate: new Date("2020-09-05"), endDate: new Date("2020-09-10"),

[BUG] Expected behavior

the calendar should be scroll and focused on the selected date range.

Environment

Package Version: "^1.0.3" React version: "^16.12.0", Node version: v10.16.3 Browser: crome

everaldo commented 4 years ago

I found a bug here:

https://github.com/Adphorus/react-date-range/blob/master/src/utils.js#L38-L46

const currentFocusInterval = {
    start: startOfMonth(currentFocusedDate),
    end: endOfMonth(addMonths(currentFocusedDate, months - 1)),
  };
  if (areIntervalsOverlapping(targetInterval, currentFocusInterval)) {
    // don't change focused if new selection in view area
    return currentFocusedDate;
  }
  return targetDate;

If the current month is in the right side, it calculates wrongly the currentFocusInterval

currentFocusDate - August, 13th

currentFocusInterval - Aug, 1st - Sep 30th

targetInterval - May, 1st - Aug 31th

Overlap - true

Result: does nothing.

Error: The real currentFocusInterval is Jul 1st - Aug 31st

everaldo commented 4 years ago

https://github.com/Adphorus/react-date-range/pull/399