Improve focus with portals

Using portals, tab moves focus out of datepicker but leaves portal open.
Without portal, user can still enter the picker with arrow keys.

Tabbing through the datepicker should not land the user into a tab trap.

closes #3522

src/index.jsx

@@ -165,7 +165,7 @@ export default class DatePicker extends React.Component {
       PropTypes.shape({
         start: PropTypes.instanceOf(Date),
         end: PropTypes.instanceOf(Date),
-      })
+      }),
     ),
     filterDate: PropTypes.func,
     fixedHeight: PropTypes.bool,
@@ -369,7 +369,7 @@ export default class DatePicker extends React.Component {
 
         return [...accumulator, { ...holiday, date }];
       },
-      []
+      [],
     );
 
     const defaultPreSelection = this.getPreSelection();
@@ -440,10 +440,10 @@ export default class DatePicker extends React.Component {
               !skipSetBlur && this.setBlur();
 
               this.setState({ inputValue: null });
-            }
+            },
           );
         }
-      }
+      },
     );
   };
   inputOk = () => isDate(this.state.preSelection);
@@ -515,7 +515,7 @@ export default class DatePicker extends React.Component {
       this.props.dateFormat,
       this.props.locale,
       this.props.strictParsing,
-      this.props.minDate
+      this.props.minDate,
     );
     // Use date from `selected` prop when manipulating only time for input value
     if (
@@ -548,7 +548,7 @@ export default class DatePicker extends React.Component {
     this.setState({ preventFocus: true }, () => {
       this.preventFocusTimeout = setTimeout(
         () => this.setState({ preventFocus: false }),
-        50
+        50,
       );
       return this.preventFocusTimeout;
     });
@@ -661,7 +661,7 @@ export default class DatePicker extends React.Component {
         isValidDateSelection = isDayInRange(
           date,
           this.props.minDate,
-          this.props.maxDate
+          this.props.maxDate,
         );
       } else if (hasMinDate) {
         const minDateStartOfDay = startOfDay(this.props.minDate);
@@ -742,7 +742,7 @@ export default class DatePicker extends React.Component {
         const selectedDay =
           this.calendar.componentNode &&
           this.calendar.componentNode.querySelector(
-            '.react-datepicker__day[tabindex="0"]'
+            '.react-datepicker__day[tabindex="0"]',
           );
         selectedDay && selectedDay.focus({ preventScroll: true });
 
@@ -764,7 +764,7 @@ export default class DatePicker extends React.Component {
       } else if (eventKey === "Escape") {
         event.preventDefault();
         this.setOpen(false);
-      } else if (eventKey === "Tab" && event.shiftKey) {
+      } else if (eventKey === "Tab") {
         this.setOpen(false);
       }
 
@@ -788,7 +788,7 @@ export default class DatePicker extends React.Component {
             this.setFocus();
             this.setState({ preventFocus: false });
           });
-        }
+        },
       );
     }
   };
@@ -889,7 +889,7 @@ export default class DatePicker extends React.Component {
             this.setFocus();
             this.setState({ preventFocus: false });
           });
-        }
+        },
       );
     }
   };
@@ -1072,7 +1072,7 @@ export default class DatePicker extends React.Component {
         {
           dateFormat: longDateFormat,
           locale,
-        }
+        },
       )}. ${
         this.props.endDate
           ? "End date: " +
@@ -1086,33 +1086,33 @@ export default class DatePicker extends React.Component {
       if (this.props.showTimeSelectOnly) {
         ariaLiveMessage = `Selected time: ${safeDateFormat(
           this.props.selected,
-          { dateFormat, locale }
+          { dateFormat, locale },
         )}`;
       } else if (this.props.showYearPicker) {
         ariaLiveMessage = `Selected year: ${safeDateFormat(
           this.props.selected,
-          { dateFormat: "yyyy", locale }
+          { dateFormat: "yyyy", locale },
         )}`;
       } else if (this.props.showMonthYearPicker) {
         ariaLiveMessage = `Selected month: ${safeDateFormat(
           this.props.selected,
-          { dateFormat: "MMMM yyyy", locale }
+          { dateFormat: "MMMM yyyy", locale },
         )}`;
       } else if (this.props.showQuarterYearPicker) {
         ariaLiveMessage = `Selected quarter: ${safeDateFormat(
           this.props.selected,
           {
             dateFormat: "yyyy, QQQ",
             locale,
-          }
+          },
         )}`;
       } else {
         ariaLiveMessage = `Selected date: ${safeDateFormat(
           this.props.selected,
           {
             dateFormat: longDateFormat,
             locale,
-          }
+          },
         )}`;
       }
     }
@@ -1144,7 +1144,7 @@ export default class DatePicker extends React.Component {
         ? safeDateRangeFormat(
             this.props.startDate,
             this.props.endDate,
-            this.props
+            this.props,
           )
         : safeDateFormat(this.props.selected, this.props);