React-dates: DayPickerSingleDateController Jump to current month on `date` prop change

[amaurym]

Here's my simple component

    <DayPickerSingleDateController
      date={getDateFromUrl(this.props.router)}
      focused
      numberOfMonths={1}
      onDateChange={console.log}
      onFocusChange={noop}
    />

My URLs are in the format /date/${yyyy}/${mm}/${dd}, and the getDateFromUrl() function just transforms the URL into a momentObject.

Repro:

• Load page /date/2017/01/01, the DayPickerSingleDateController will highlight Jan 1st 2017.
• Navigate client side (i.e. no page refresh) to /date/2018/01/01

Expected result:

• DayPickerSingleDateController changes its visible month to Jan 2018

Actual result:

• DayPickerSingleDateController stays as Jan 2017.
• Jan 1st 2017 gets un-highlighted (this is good)
• If I manually scroll to Jan 2018, I see Jan 1st 2018 being hightlighted (which means the date prop has correctly been changed)

[majapw]

It sounds like this is a dupe of https://github.com/airbnb/react-dates/issues/1257! This is on my to-do but I haven't gotten around to it. We'd definitely be open to a PR though.

I think for this particular case, in the componentWillReceiveProps method of the DayPicker*Controller components, you could check if the selected date has changed and if the new date is visible or not (there's a helper for that) and then set the month accordingly.... there may be some finagling beyond that, but that's the gist of it.

[majapw]

I'm keeping this as the canonical issue since the description is so nice and succinct!

[matheusmonte]

Are you needing help on this ? @majapw

[majapw]

@matheusmonte would love a PR for this, as this is not a top priority for us right now!

[matheusmonte]

@majapw I get this, but if you want help on something more priority, May I help?

[majapw]

@matheusmonte please! :) I think if you look into the way the onMonthChange/onYearChange methods work, that is a good starting point for how to satisfy this requirement. I imagine you'd make the change in the componentWillReceiveProps of the DayPicker as well as the DayPickerSingleDateController/DayPickerRangeController. :) Happy to accept a PR! @GoGoCarl might be a good reviewer as well (if they're willing :P).

[matheusmonte]

@majapw OK, I will working on this weekend, I think, next week will be good to review. If I can help in something more, please, let me know.

[GoGoCarl]

@majapw / @matheusmonte Happy to add a review when it's ready!

[carllang]

Any updates on this issue?

[jayswain]

I've got a PR to resolve this issue here: #1481

[djamshed]

Doing a quick recap, because the issue is now spread over multiple threads and PRs.

Solution: this isn't implemented, yet. Suggested workaround 1 or workaround 2 is to force the calendar to re-render by assigning the date string as the key, although your UX designer will hate it because calendar will flick.

EDIT: a slight improvement over these workarounds would be setting the date's month as the key so that it flicks only on month change.

Related issues (could be more):
https://github.com/airbnb/react-dates/issues/135
https://github.com/airbnb/react-dates/issues/48
https://github.com/airbnb/react-dates/issues/240

Related PRs (could be more):
outdated PR: https://github.com/airbnb/react-dates/pull/1481
author closed after deciding solution isn't good enough: https://github.com/airbnb/react-dates/pull/1487

[mattaningram]

I appreciate all the hard work the maintainers do to make this stuff available for us, but this is such a basic function of a date range picker, particularly when picking multi-month or multi-year ranges that it seems a bit odd that it hasn't been addressed yet. I can't think of any other date range picker I have ever used that does not focus the calendar popup on the relevant month from the input clicked.

This alone is likely to eventually cause us to switch from using react-dates to another library. You can still have a performant animation for a calendar and have a wide range of months, or just don't animate when jumping to a distant month.

[AlexKDawson]

Is there any updates on the status of this? Are we still looking for a PR to deal with it? If so I can attempt a fix.

[ImadBoumzaoued]

if anyone still interested, even with a dirty hack 😬, here is one:
https://codesandbox.io/s/frosty-wilbur-1irkh

[wootencl]

Relevant code snippets from @ImadBoumzaoued's codesandbox (updated a bit to check for visibility and TS):

useEffect(() => {
  const isVisible = monthController?.current?.isVisible
  if (!isUndefined(isVisible) && !isVisible) {
    // Checking for undefined above should gurantee the below are defined
    monthController!.current!.onMonthSelect(monthController!.current!.month, internalStartDate!.format('M'))
  }
}, [internalStartDate])

<DayPickerRangeController
  ...
  renderMonthElement={params => {
    monthController.current = { ...params }
    return params.month.format('MMMM')
  }} />

EDIT: This actually seemed to break more things than it fixed 😞. Would not advise using. Hopefully one of the above PRs that addresses this issue can be merged

[insanrizky]

Got a similar issue to jump to the current month after clicking to the next/prev months.
Hopefully, someone will make a fix for this! 😉