React-dates: DayPickerSingleDateController: Dates & Month Not being rendered initially

[vivek3003]

When I am using DayPickerSingleDateController this happens when I try to display the date.
On Clicking Next 2-3 times, the months start rendering correctly.

I am currently using DayPickerSingleDateController here. This is my configuration.

<div className="day-picker-wrap">
  <DayPickerSingleDateController
    onDateChange={(date) => { this.props.onChange(date); }}
    onFocusChange={() => { this.setState({ focused: true }); }}
    focused={this.state.focussed}
    hideKeyboardShortcutsPanel
    date={this.props.date || undefined}
    isDayBlocked={(day) => (
      _.isFunction(this.props.isDayBlocked) ? this.props.isDayBlocked(day) : false
    )}
  />
</div>
// focused is set true initially also.

I have followed this as a guide. https://github.com/airbnb/react-dates/blob/master/examples/DayPickerSingleDateControllerWrapper.jsx
The only difference is I am toggling the display property of div.day-picker-wrap conditionally.

react-dates version: 13.0.2
react version: 16.0.0

Please let me know if anything else is needed to debug.

Thanks.

[vivek3003]

It seems to be happening because DayPicker_transitionContainer height is being set to 24px.

For now, I am fixing this by setting a min-height on DayPicker_transitionContainer.

[majapw]

Can you upgrade to 13.0.5 and let us know if this still happens? Also what browser are you using?

Is .day-picker-wrap originally display: none? The display: none example seems to work for me. The transition container height gets set dynamically so it can be finicky, but I haven't run into this bug.

When the daypicker wrapper is first shown, is focused set to true off the bat?

[vivek3003]

_Can you upgrade to 13.0.5 and let us know if this still happens? Also what browser are you using?_
Yes. This is still happening. Chrome 61.0.

_Is .day-picker-wrap originally display: none?_
So I am using another wrapper over day-picker-wrap to toggle visibility. I was also using the visibility property on it.

_When the daypicker wrapper is first shown, is focused set to true off the bat?_
Yes.

Can you give me a few days. I shall try to create a codepen/JSBin Link to recreate this issue ?

[majapw]

Sorry for the long delay in response! If you are still seeing this, a codepen/JSBin would be very helpful. For some reason the height update path seems to be being called. :/

[Rungerd]

Have the same issue with DayPickerRangeController. I am using custom wrapper for calendar. On Clicking Next (Previous) 2-3 times, the months start rendering correctly.

render() {
        const { showInputs } = this.props;
        const { focusedInput, startDate, endDate } = this.state;

        let showCalendarClass = isHidden => ( classNames({
            'display-none': isHidden,
            calendar: true
        }));

        let inputClass = () => ( classNames({
            'input-field': true
        }));

        const props = _.omit(this.props, [
            'autoFocus',
            'autoFocusEndDate',
            'initialStartDate',
            'initialEndDate',
            'showInputs',
            'onChange',
            'fromDate',
            'toDate',
            'range'
        ]);

        return (
            <div>
                {showInputs &&
                    <div style={{ marginBottom: 16 }}>
                        <input className={inputClass()} type="text" name="date range" value={this.state.inputText} onClick={() => this.setState({ isHidden: false })} readOnly />
                    </div>
        }
                <div className={showCalendarClass(this.state.isHidden)}>
                    <DayPickerRangeController
                        {...props}
                        onDatesChange={this.onDatesChange}
                        onFocusChange={this.onFocusChange}
                        isOutsideRange={() => false}
                        initialVisibleMonth={() => moment().subtract(1, 'month')}
                        focusedInput={focusedInput}
                        startDate={startDate}
                        endDate={endDate}
                        minimumNights={0}
                        renderCalendarInfo={this.renderInfo}
                        onOutsideClick={() => this.setState({ isHidden: true })}
                    />
                </div>
            </div>
        );
    }

It seems to be happening because DayPicker_transitionContainer height is being set to 24px.
For now, I am fixing this by setting a min-height on DayPicker_transitionContainer.

It worked for me

[erin-doyle]

I think it's going to be difficult to help troubleshoot this without seeing the context with which this component is being rendered. There could be something about the css of the parent(s) it's being rendered into that's leading to this.

[vivek3003]

Understandable. Will try to share a JSbin/codepen link reproducing this in the next 2 days. Sorry could not get it done until now.

[erango]

We're running into the same issue. Has anyone found a way around it?

[stefmirica]

I had a similar issue. The problem in my case was the fact that I was using DayPickerRangeController inside a popup-like wrapper, which, at the moment when the picker was rendered, it was hidden. Since the .CalendarMonthGrid element has positioned: absolute inside .DayPicker_transitionContainer and since .DayPicker_transitionContainer has no initial height this issue occurred. The solution that I've used (not pretty but it worked) was to use min-height like

.DayPicker_transitionContainer{
    min-height: 300px;
}