[Range Calendar] Update left/right side calendar months when programmatically setting the time

[BionBit]

Consider that clients might add a functionality to programmatically set the time (like our project does).
e.g. buttons like 'Last Month', 'Last Week'.

Clicking those buttons to update the selectedValue sent as prop to RangeCalendar will not work as expected.

STR:

1. Select the current date in the first week of the left-side calendar (like Dec 2nd).

2. Left-side calendar shows Dec 2019, right side calendar shows Jan 2020

3. Click the 'Last Month' (an example) to update the selectedValue sent as prop to RangeCalendar

4. Notice that the calendars do not update

• Current behavior: left side calendar shows Dec 2019, right side calendar shows Jan 2020
• Expected behavior: left side calendar shows Nov 2019, right side calendar shows Dec 2019

Proposed fix in 'RangeCalendar.js', tested locally,

  static getDerivedStateFromProps(nextProps, state) {
    const newState = {};
    - if ('value' in nextProps) {
    + if ((nextProps.selectedValue[0] && nextProps.selectedValue[1]) || 'value' in nextProps) {
      newState.value = normalizeAnchor(nextProps, 0);
    }

[zhaoyao91]

I encountered the same problem.

A workaround here: add a timestamp as the key of the calendar, and refresh it on any user events. Thus the calendar will get recreate and show the correct display.