fix(DatePicker): maintain focus on DatePicker after input is cleared (#…

…8894)

* refactor(DatePicker): optionally chain `this.cal` reference check

* fix(DatePicker): avoid aggressive range input clearing

* fix(DatePicker): focus date picker input after input clear

* fix(DatePicker): add additional check for DateElem nodes

* refactor(DatePicker): consolidate arrow down keyboard listener

* docs(DatePicker): add `onChange` actions

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/src/components/DatePicker/DatePicker-story.js

@@ -51,6 +51,7 @@ const props = {
     disable: array('Disable specific dates (disable)', ['07/15/2021'], ','),
     onClose: action('onClose'),
     onOpen: action('onOpen'),
+    onChange: action('onChange'),
   }),
   datePickerInput: () => ({
     id: 'date-picker-input-id',
@@ -87,6 +88,7 @@ const props = {
       'Icon description (iconDescription in <DatePickerInput>)',
       'Icon description'
     ),
+    onChange: action('onChange'),
   }),
 };
 

packages/react/src/components/DatePicker/DatePicker.js

@@ -448,6 +448,7 @@ export default class DatePicker extends Component {
   onChange = () => {
     if (this.inputField.value === '' && this.cal?.selectedDates.length) {
       this.cal.clear();
+      this.cal.input.focus();
     }
   };
 
@@ -468,37 +469,33 @@ export default class DatePicker extends Component {
   };
 
   addKeyboardEvents = (cal) => {
-    if (this.inputField) {
-      this.inputField.addEventListener('keydown', (e) => {
-        if (match(e, keys.ArrowDown)) {
-          (
-            cal.selectedDateElem ||
-            cal.todayDateElem ||
-            cal.calendarContainer.querySelector('.flatpickr-day[tabindex]') ||
-            cal.calendarContainer
-          ).focus();
-        }
-      });
-      this.inputField.addEventListener('change', this.onChange);
-    }
-    if (this.toInputField) {
-      this.toInputField.addEventListener('blur', (evt) => {
-        if (!this.cal.calendarContainer.contains(evt.relatedTarget)) {
-          this.cal.close();
-        }
-      });
-      this.toInputField.addEventListener('keydown', (e) => {
-        if (match(e, keys.ArrowDown)) {
-          (
-            cal.selectedDateElem ||
-            cal.todayDateElem ||
-            cal.calendarContainer.querySelector('.flatpickr-day[tabindex]') ||
-            cal.calendarContainer
-          ).focus();
-        }
-      });
-      this.toInputField.addEventListener('change', this.onChange);
-    }
+    const initArrowDownListener = (element) => {
+      if (element) {
+        element.addEventListener('keydown', (e) => {
+          if (match(e, keys.ArrowDown)) {
+            const {
+              calendarContainer,
+              selectedDateElem: fpSelectedDateElem,
+              todayDateElem: fptodayDateElem,
+            } = cal;
+            const selectedDateElem =
+              calendarContainer.querySelector('.selected') &&
+              fpSelectedDateElem;
+            const todayDateElem =
+              calendarContainer.querySelector('.today') && fptodayDateElem;
+            (
+              selectedDateElem ||
+              todayDateElem ||
+              calendarContainer.querySelector('.flatpickr-day[tabindex]') ||
+              calendarContainer
+            ).focus();
+          }
+        });
+        element.addEventListener('change', this.onChange);
+      }
+    };
+    initArrowDownListener(this.inputField);
+    initArrowDownListener(this.toInputField);
   };
 
   rightArrowHTML() {