Repository: react-dates/react-dates (language: javascript)

Issue:
DRP: drop down not closing when (forward) tabbing out of focus
**react-dates version**
react-dates@21.1.0

**Describe the bug**
I believe the calendar should close when you move the focus outside of the components within the calendar component. This is when happens when you back-tab, but not when you forward tab. Meaning, if you forward tab to another element which also uses some keyboard interaction and absolute positioned dropdowns, you could end up in an awkward position.

Problem: switching focus away from calendar using Tab does not close the Calendar dropdown. 

**Source code (including props configuration)**
This bug is found in any setup of the component that I've tried, also in the publicly available storybook here:
https://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default
(Use the same prop setup as the storybook basic example)

**Screenshots/Gifs**
In the gif, you can see me tabbing to select the calendar. After tabbing through all the elements and focusing on *other* elements on the site, the dropdown remains open.
https://gyazo.com/fb17ed0af5d125c7566c0352a0cf6c28

Backwards tabbing works correctly however. It closes the dropdown when currently focusing the first element and pressing shift-tab.

**Desktop (please complete the following information):**
 - OS: macOS
 - Browser: Chrome 
 - Version: 77.0.3865.90

**Is the issue reproducible in Storybook?**
Yes.
https://airbnb.io/react-dates/?path=/story/daterangepicker-drp--default


Discussion / hints:
@antjernberg yeah that's true. I made PR #1741 about two month ago. And this fix issues like this. But I'm not sure that it will be merged(

Fix patch:
diff --git a/src/components/DateRangePicker.jsx b/src/components/DateRangePicker.jsx
index 040d1fa59..a67e535c1 100644
--- a/src/components/DateRangePicker.jsx
+++ b/src/components/DateRangePicker.jsx
@@ -481,6 +481,7 @@ class DateRangePicker extends React.PureComponent {
     /* eslint-disable jsx-a11y/click-events-have-key-events */
     return (
       <div
+        key="day-picker"
         ref={this.setDayPickerContainerRef}
         {...css(
           styles.DateRangePicker_picker,
diff --git a/src/components/DateRangePickerInput.jsx b/src/components/DateRangePickerInput.jsx
index 924ba9c4b..d3923c98b 100644
--- a/src/components/DateRangePickerInput.jsx
+++ b/src/components/DateRangePickerInput.jsx
@@ -253,7 +253,7 @@ function DateRangePickerInput({
         regular={regular}
       />
 
-      {children}
+      {!isEndDateFocused && children}
 
       {
         <div
@@ -289,6 +289,8 @@ function DateRangePickerInput({
         regular={regular}
       />
 
+      {isEndDateFocused && children}
+
       {showClearDates && (
         <button
           type="button"


Test patch:
diff --git a/test/components/DateRangePicker_spec.jsx b/test/components/DateRangePicker_spec.jsx
index 158bb255d..7f20e12d7 100644
--- a/test/components/DateRangePicker_spec.jsx
+++ b/test/components/DateRangePicker_spec.jsx
@@ -9,6 +9,7 @@ import DateRangePicker, { PureDateRangePicker } from '../../src/components/DateR
 
 import DateRangePickerInputController from '../../src/components/DateRangePickerInputController';
 import DayPickerRangeController from '../../src/components/DayPickerRangeController';
+import DayPicker from '../../src/components/DayPicker';
 
 import {
   HORIZONTAL_ORIENTATION,
@@ -17,6 +18,49 @@ import {
 
 const describeIfWindow = typeof document === 'undefined' ? describe.skip : describe;
 
+class DateRangePickerWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      focusedInput: null,
+      startDate: null,
+      endDate: null,
+    };
+
+    this.onDatesChange = this.onDatesChange.bind(this);
+    this.onFocusChange = this.onFocusChange.bind(this);
+  }
+
+  onDatesChange({ startDate, endDate }) {
+    this.setState({ startDate, endDate });
+  }
+
+  onFocusChange(focusedInput) {
+    this.setState({ focusedInput });
+  }
+
+  render() {
+    const { focusedInput, startDate, endDate } = this.state;
+
+    return (
+      <div>
+        <DateRangePicker
+          {...this.props}
+          onDatesChange={this.onDatesChange}
+          onFocusChange={this.onFocusChange}
+          focusedInput={focusedInput}
+          startDate={startDate}
+          endDate={endDate}
+        />
+        <button type="button">
+          Dummy button
+        </button>
+      </div>
+    );
+  }
+}
+
 const requiredProps = {
   onDatesChange: () => {},
   onFocusChange: () => {},
@@ -539,6 +583,23 @@ describe('DateRangePicker', () => {
     });
   });
 
+  describeIfWindow('day picker position', () => {
+    it('day picker is opened after the end date input when end date input is focused', () => {
+      const wrapper = mount((
+        <DateRangePickerWrapper
+          startDateId="startDate"
+          endDateId="endDate"
+        />
+      ));
+      expect(wrapper.find(DayPicker)).to.have.length(0);
+      wrapper.find('input').at(0).simulate('focus'); // when focusing on start date the day picker is rendered after the start date input
+      expect(wrapper.find('DateRangePickerInput').children().childAt(1).find(DayPicker)).to.have.length(1);
+      wrapper.find('input').at(1).simulate('focus'); // when focusing on end date the day picker is rendered after the end date input
+      expect(wrapper.find('DateRangePickerInput').children().childAt(1).find(DayPicker)).to.have.length(0);
+      expect(wrapper.find('DateRangePickerInput').children().childAt(3).find(DayPicker)).to.have.length(1);
+    });
+  });
+
   describeIfWindow('#onDayPickerBlur', () => {
     it('sets state.isDateRangePickerInputFocused to true', () => {
       const wrapper = shallow((