Fix keyboard navigation

Original message by greglo in PR #2084:

Keyboard navigation is broken for the date range picker. The following
bugs exist:

When passing through the component with tab-navigation, after exiting
the end-date input the dropdown does not close. When attempting to enter
values into the end-date dropdown, users would have to tab backwards
back to the dropdown to enter values. The simplest and clearest solution
that came to be is simply to put the day picker after the currently
active input. In this way, the dropdown always appears next in the
tab-order to the input the user has selected. The existing blur handler
in the dropdown means that tabbing through the component will leave the
dropdown closed at the end.

The react keys ensure that the element is just moved over in the DOM and
so there is no flickering.

Fixes #1809

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,

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"