[terra-date-time-picker] Focus fix for mobile view

packages/terra-date-picker/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Focus is now retained on the calendar button when the calendar is closed in mobile view.
+
 ## 4.109.0 - (May 14, 2024)
 
 * Changed

packages/terra-date-picker/src/DatePicker.jsx

@@ -278,6 +278,11 @@ class DatePicker extends React.Component {
     if (this.props.onClickOutside) {
       this.props.onClickOutside(event);
     }
+    setTimeout(() => {
+      if (this.calendarButton) {
+        this.calendarButton.focus();
+      }
+    }, 100);
   }
 
   handleBlur(event) {

packages/terra-date-time-picker/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Introduced a new prop `disableButtonFocusOnClose` to optionally disable focusing the button when the calendar is closed.
+
 ## 4.117.0 - (May 14, 2024)
 
 * Changed

packages/terra-date-time-picker/src/DateTimePicker.jsx

@@ -141,6 +141,12 @@ const propTypes = {
    * ID must be htmlFor prop value with error text.
    */
   errorId: PropTypes.string,
+  /**
+   * If true, the focus will not return to the button that opened the DatePicker when it is closed.
+   * This can be useful to prevent unintended focus behavior in certain user flows or accessibility contexts.
+   * Default is false, meaning focus will return to the button on close.
+   */
+  disableButtonFocusOnClose: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -167,6 +173,7 @@ const defaultProps = {
   timeVariant: DateTimeUtils.FORMAT_24_HOUR,
   initialTimeZone: DateTimeUtils.getLocalTimeZone(),
   errorId: '',
+  disableButtonFocusOnClose: false,
 };
 
 class DateTimePicker extends React.Component {
@@ -765,6 +772,7 @@ class DateTimePicker extends React.Component {
       value,
       timeVariant,
       errorId,
+      disableButtonFocusOnClose,
       ...customProps
     } = this.props;
 
@@ -811,7 +819,7 @@ class DateTimePicker extends React.Component {
             value={dateValue}
             name="input"
             disabled={disabled}
-            disableButtonFocusOnClose
+            disableButtonFocusOnClose={disableButtonFocusOnClose}
             isIncomplete={isIncomplete}
             isInvalid={isInvalid}
             required={required}

packages/terra-date-time-picker/tests/jest/__snapshots__/DateTimePicker.test.jsx.snap

@@ -20,6 +20,7 @@ exports[`correctly applies the theme context className 1`] = `
 exports[`renders DateTimePicker with correct ARIA attributes 1`] = `
 <DateTimePicker
   ariaLabel="Enter Date/Time"
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -65,6 +66,7 @@ exports[`renders DateTimePicker with correct ARIA attributes 1`] = `
 
 exports[`should render a date time picker with a default date and time 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -110,6 +112,7 @@ exports[`should render a date time picker with a default date and time 1`] = `
 
 exports[`should render a date time picker with disabled dates 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   excludeDates={
@@ -159,6 +162,7 @@ exports[`should render a date time picker with disabled dates 1`] = `
 
 exports[`should render a date time picker with filtered dates 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   filterDate={[Function]}
@@ -204,6 +208,7 @@ exports[`should render a date time picker with filtered dates 1`] = `
 
 exports[`should render a date time picker with included dates 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   includeDates={
@@ -253,6 +258,7 @@ exports[`should render a date time picker with included dates 1`] = `
 
 exports[`should render a date time picker with min and max dates 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -297,6 +303,7 @@ exports[`should render a date time picker with min and max dates 1`] = `
 
 exports[`should render a date time picker with onBlur 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -342,6 +349,7 @@ exports[`should render a date time picker with onBlur 1`] = `
 
 exports[`should render a date time picker with onChange 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -387,6 +395,7 @@ exports[`should render a date time picker with onChange 1`] = `
 
 exports[`should render a date time picker with onChangeRaw 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -432,6 +441,7 @@ exports[`should render a date time picker with onChangeRaw 1`] = `
 
 exports[`should render a date time picker with the seconds field enabled 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -476,6 +486,7 @@ exports[`should render a date time picker with the seconds field enabled 1`] = `
 
 exports[`should render a default date time picker 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -521,6 +532,7 @@ exports[`should render a default date time picker 1`] = `
 exports[`should render a default date time picker with ariaLabel 1`] = `
 <DateTimePicker
   ariaLabel="Select date and time"
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -570,6 +582,7 @@ exports[`should render a default date time picker with custom date input attribu
       "id": "terra-date-input",
     }
   }
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -614,6 +627,7 @@ exports[`should render a default date time picker with custom date input attribu
 
 exports[`should render a default date time picker with custom time input attributes 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -663,6 +677,7 @@ exports[`should render a default date time picker with custom time input attribu
 
 exports[`should render a disabled date time picker 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={true}
   errorId=""
   initialTimeZone="America/Chicago"
@@ -707,6 +722,7 @@ exports[`should render a disabled date time picker 1`] = `
 
 exports[`should render a error message 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId="default-invalid-error"
   initialTimeZone="America/Chicago"
@@ -751,6 +767,7 @@ exports[`should render a error message 1`] = `
 
 exports[`should render with a default timeVariant if variant is not specified 1`] = `
 <DateTimePicker
+  disableButtonFocusOnClose={false}
   disabled={false}
   errorId=""
   initialTimeZone="America/Chicago"