[EuiSuperDatePicker] Support onFocus (#4924) (#6320)

* [EuiSuperDatePicker] Support onFocus (#4924)

* callback invoking multiple times.

* [EuiSuperDatePicker] Updated the onFocus call on buttonProps and prettyDuration (#4924)

* Apply suggestions from code review

[EuiSuperDatePicker] Added code suggestions for onFocus (#4924)

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* [EuiSuperDatePicker] Updated super_date_picker's tests and onFocus on prettyFormat  (#4924)

* [EuiSuperDatePicker] added test case for focus on superDatePickerShowDatesButton (#4924)

* [EuiSuperDatePicker] prettier error resolved (#4924)

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

src/components/date_picker/super_date_picker/super_date_picker.test.tsx

@@ -167,6 +167,36 @@ describe('EuiSuperDatePicker', () => {
       );
     });
 
+    it('invokes onFocus callbacks on the date popover buttons', () => {
+      const focusMock = jest.fn();
+      const component = mount(
+        <EuiSuperDatePicker
+          onTimeChange={noop}
+          showUpdateButton={false}
+          onFocus={focusMock}
+        />
+      );
+
+      component
+        .find('button[data-test-subj="superDatePickerShowDatesButton"]')
+        .simulate('focus');
+      expect(focusMock).toBeCalledTimes(1);
+
+      component
+        .find('button[data-test-subj="superDatePickerShowDatesButton"]')
+        .simulate('click');
+
+      component
+        .find('button[data-test-subj="superDatePickerstartDatePopoverButton"]')
+        .simulate('focus');
+      expect(focusMock).toBeCalledTimes(2);
+
+      component
+        .find('button[data-test-subj="superDatePickerstartDatePopoverButton"]')
+        .simulate('focus');
+      expect(focusMock).toBeCalledTimes(3);
+    });
+
     describe('showUpdateButton', () => {
       test('can be false', () => {
         const component = shallowAndDive(

src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, FunctionComponent } from 'react';
+import React, { Component, FocusEventHandler, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
 import dateMath from '@elastic/datemath';
@@ -87,6 +87,11 @@ export type EuiSuperDatePickerProps = CommonProps & {
    */
   locale?: LocaleSpecifier;
 
+  /**
+   * Triggered whenever the EuiSuperDatePicker's dates are focused
+   */
+  onFocus?: FocusEventHandler;
+
   /**
    * Callback for when the refresh interval is fired.
    * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied
@@ -393,6 +398,7 @@ export class EuiSuperDatePickerInternal extends Component<
       timeFormat,
       utcOffset,
       compressed,
+      onFocus,
     } = this.props;
 
     if (
@@ -415,6 +421,7 @@ export class EuiSuperDatePickerInternal extends Component<
             data-test-subj="superDatePickerShowDatesButton"
             disabled={isDisabled}
             onClick={this.hidePrettyDuration}
+            onFocus={onFocus}
           >
             <PrettyDuration
               timeFrom={start}
@@ -454,6 +461,7 @@ export class EuiSuperDatePickerInternal extends Component<
                 onPopoverToggle={this.onStartDatePopoverToggle}
                 onPopoverClose={this.onStartDatePopoverClose}
                 timeOptions={timeOptions}
+                buttonProps={{ onFocus }}
               />
             }
             endDateControl={
@@ -474,6 +482,7 @@ export class EuiSuperDatePickerInternal extends Component<
                 onPopoverToggle={this.onEndDatePopoverToggle}
                 onPopoverClose={this.onEndDatePopoverClose}
                 timeOptions={timeOptions}
+                buttonProps={{ onFocus }}
               />
             }
           />

upcoming_changelogs/6320.md

@@ -0,0 +1,2 @@
+- Added `onFocus` prop callback to `EuiSuperDatePicker`
+