As of 4.1.0 - <SingleDatePicker> only displays when the window is resized. The 'left' property is incorrectly set.

First, just want to say thank you to all the contributors of this great library. It’s been a pleasure to work with. The examples are great too.

---

Issue Summary

I’ve got a <SingleDatePicker> like this:

<SingleDatePicker
  id="changeUntil"
  focused
  placeHolder="MM/DD/YYYY"
  date={this.state.until}
  numberOfMonths={2}
  isDayBlocked={d => d.isAfter(moment().add(5, 'year'))}
  onDateChange={s => this.setState({
    // end things at last moment of
    // the end date chosen
    until: s.endOf('day'),
    count: null,
    untilModal: false,
    currentlyChoosing: null,
  })}
  orientation="vertical"
/>

It is mounted in a modal which opens - and when the modal closes it unmounts its children. The issue is that under this configuration the <SingleDatePicker> has the wrong left style attribute until the window is resized. This happens for orientation vertical or horizontal.

---

Issue Proof (video)

---

My Current Solution

In my app stylesheet I simply added:

.SingleDatePicker__picker--direction-left {
  left: 0!important;
}

Which fixes it. Fortunately !important overrides the inline style applied by the library.

[nifflets]

I would like to add that I’m seeing a similar issue but for the DateRangePicker. It is in a modal that transitions its positioning and mounts while in the “before transition” position. As a result, the DateRangePicker position is incorrect as responsivizePickerPosition() doesn’t get called again until the window is resized. I’m also using the left: 0px !important workaround.

[lasergoat]

@majapw Sorry for the delay, my fix above works so well I totally forgot about this issue. Here’s a video showing the same behavior in horizontal mode without my css fix.