React-dates: DateRangePicker not focusing endDate after selecting startDate

[TMonika]

After selecting startDate, I can see that focusedInput is changed to endDate but within no time it changes back to startDate and this repeats not allowing DateRangePicker to close.

Note: On debug mode, it works fine. Not sure what's going wrong.

Here is my code:

state = {
    focusedInput: null
  };

  _handleFocusChange = (focusedInput) => {
    console.log("FocusedInput: ", focusedInput);
    this.setState({
      // Force the focusedInput to always be truthy so that dates are always selectable
      focusedInput,
    });
  }
<DateRangePicker
       startDate={ this.props.startDate }
       endDate={ this.props.endDate }
       numberOfMonths={ this.props.numberOfMonths }
       orientation={ "verticalScrollable" }
       onDatesChange={ this._handleDateRangeSelection }
       isOutsideRange={ this.props.isOutsideRange }
       onFocusChange={ this._handleFocusChange }
       focusedInput={ this.state.focusedInput }
       initialVisibleMonth={ this._getInitialMonth }
       withPortal={ true }
       minimumNights={ this.props.minimumNights }
/>

_handleDateRangeSelection = ({ startDate, endDate }) => {
    const defaultDate = new Date().getTime();
    this.setState({
      departOn: !isEmpty(startDate) ? startDate.toDate().getTime() : defaultDate,
      returnOn: !isEmpty(endDate) ? endDate.toDate().getTime() : defaultDate
    });
}

In the above code, console log prints endDate and startDate immediately after selecting startDate.

[szczepanbarszczowski]

I've been on v7.0.1 and after upgrade to v12.7.0 encountered the same behaviour.

[alexi]

Also seeing this issue - has anyone found a solution?

[majapw]

Is this only on the verticalScrollable datepicker or on other versions as well?

[alexi]

I am using horizontal one-month DateRangePicker

[TMonika]

Anyone found solution for this issue? All I could find from debugging is that onStartDateFocus is being called again and is changing the focus to START_DATE as I am not disabling the inputs.

function onStartDateFocus() {
    if (!this.props.disabled) {
       console.log("OnstartDateFocus");
       this.props.onFocusChange(_constants.START_DATE);
    }
}

Same is the case with END_DATE. Clicking on either of them doesn't change focus and hence blocks the closing of DateRangePicker. Any help would be appreciated as I am blocked on this.

[teroqim]

A workaround that seems to do the job in my particular case. Would be awesome if this could be fixed properly!
Here's my onFocusChange handler:

onFocusChange(focusedInput){
  if (this.state.focusedInput==='endDate' && focusedInput==='startDate') {
    return
  }
  this.setState({ focusedInput })
}

[pencilcheck]

Having this issue as well in the latest version 16.3.6

I think the problem is that somehow onFocusChange is being called twice at the same time, each with different values, and somehow the "startDate" is called after "endDate" therefore setState never commit the change to the local state somehow after those two calls.

Solved it with

                            <DateRangePicker
                              startDate={obj.startdate}
                              startDateId="startdate"
                              endDate={obj.enddate}
                              endDateId="enddate"
                              onDatesChange={({startDate, endDate}) => {
                                this.setState({
                                  focusedInput: startDate && !endDate ? 'endDate' : null
                                })
                              }}
                              focusedInput={this.state.focusedInput}
                              onFocusChange={(focusedInput) => {
                                if (!this.state.focusedInput) {
                                  this.setState({ focusedInput })
                                }
                              }}
                            />

[sheelah]

I'm seeing this as well and @pencilcheck's workaround worked for me.

Update: For me this ended up happening because of my use of react-responsive. A not specific enough media query with that led to multiple datepickers in the DOM with the same id's at certain screen widths (which looks like the issue covered at https://github.com/airbnb/react-dates/issues/144). I updated my rendering logic to ensure there's only 1 of these in the DOM and now the datepicker works as expected.