From a897b1a0d764d6843fda2a51ab1f1aac0e58c079 Mon Sep 17 00:00:00 2001
From: Sam Apostel <sam@apostel.be>
Date: Mon, 11 Sep 2023 11:54:20 +0200
Subject: [PATCH] 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 | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/index.jsx b/src/index.jsx
index 293cd85f5..d6c995ef4 100644
--- a/src/index.jsx
+++ b/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,17 +1086,17 @@ 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(
@@ -1104,7 +1104,7 @@ export default class DatePicker extends React.Component {
           {
             dateFormat: "yyyy, QQQ",
             locale,
-          }
+          },
         )}`;
       } else {
         ariaLiveMessage = `Selected date: ${safeDateFormat(
@@ -1112,7 +1112,7 @@ export default class DatePicker extends React.Component {
           {
             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);