From 12c045ef00e1e8477d51cb5c7395962550c52c96 Mon Sep 17 00:00:00 2001
From: UzairNoman <uzairation@gmail.com>
Date: Sat, 22 Oct 2022 22:29:26 +0200
Subject: [PATCH] [EuiSuperDatePicker] Support onFocus (#4924)

---
 .../super_date_picker.test.tsx.snap           | 16 ++++++++++++++++
 .../super_date_picker.test.tsx                | 15 +++++++++++++++
 .../super_date_picker/super_date_picker.tsx   | 19 ++++++++++++++++++-
 .../form_control_layout.tsx                   |  2 ++
 upcoming_changelogs/6320.md                   |  2 ++
 5 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 upcoming_changelogs/6320.md

diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index d753a10e5c1..26ac81bd62d 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -11,6 +11,8 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
       className="euiSuperDatePicker testClass1 testClass2"
       data-test-subj="test subject string"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -336,6 +338,8 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
       className="euiSuperDatePicker"
       data-test-subj="mySuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -661,6 +665,8 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
       className="euiSuperDatePicker"
       compressed={true}
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1022,6 +1028,8 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1281,6 +1289,8 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1584,6 +1594,8 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1908,6 +1920,8 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -2232,6 +2246,8 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
+      onClick={[Function]}
+      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
index f5d0ec950b4..3b6b5506187 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
+++ b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx
@@ -167,6 +167,21 @@ describe('EuiSuperDatePicker', () => {
       );
     });
 
+    test('keyup or click on FCLayout or DatePickerRange should invoke onFocus on SuperDatePicker', () => {
+      const focusMock = jest.fn();
+
+      const componentFocus = mount<EuiSuperDatePickerInternal>(
+        <EuiSuperDatePicker onTimeChange={noop} onFocus={focusMock} />
+      );
+
+      componentFocus.find('EuiFormControlLayout').simulate('keyUp');
+      componentFocus.find('EuiDatePickerRange').simulate('keyUp');
+      componentFocus.find('EuiFormControlLayout').simulate('click');
+      componentFocus.find('EuiDatePickerRange').simulate('click');
+
+      expect(focusMock).toBeCalledTimes(4);
+    });
+
     describe('showUpdateButton', () => {
       test('can be false', () => {
         const component = shallowAndDive(
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 06c5ab7a293..1568ff9b735 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/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 is focused
+   */
+  onFocus?: FocusEventHandler<HTMLDivElement>;
+
   /**
    * Callback for when the refresh interval is fired.
    * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied
@@ -533,6 +538,7 @@ export class EuiSuperDatePickerInternal extends Component<
       isDisabled,
       isPaused,
       onRefreshChange,
+      onFocus,
       recentlyUsedRanges,
       refreshInterval,
       showUpdateButton,
@@ -547,6 +553,15 @@ export class EuiSuperDatePickerInternal extends Component<
     // Force reduction in width if showing quick select only
     const width = isQuickSelectOnly ? 'auto' : _width;
 
+    const handleInputActivity = (
+      event:
+        | React.KeyboardEvent<HTMLInputElement>
+        | React.MouseEvent<HTMLInputElement>
+        | any
+    ) => {
+      if (onFocus) onFocus(event);
+    };
+
     const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? (
       <EuiAutoRefreshButton
         className="euiFormControlLayout__append"
@@ -612,6 +627,8 @@ export class EuiSuperDatePickerInternal extends Component<
                 compressed={compressed}
                 isDisabled={isDisabled}
                 prepend={quickSelect}
+                onClick={handleInputActivity}
+                onKeyUp={handleInputActivity}
                 append={autoRefreshAppend}
                 data-test-subj={dataTestSubj}
               >
diff --git a/src/components/form/form_control_layout/form_control_layout.tsx b/src/components/form/form_control_layout/form_control_layout.tsx
index c585be791ac..3c380e29520 100644
--- a/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.tsx
@@ -39,6 +39,8 @@ export type EuiFormControlLayoutProps = CommonProps &
      * Creates an input group with element(s) coming after children.
      * `string` | `ReactElement` or an array of these
      */
+
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
     append?: PrependAppendType;
     children?: ReactNode;
     icon?: EuiFormControlLayoutIconsProps['icon'];
diff --git a/upcoming_changelogs/6320.md b/upcoming_changelogs/6320.md
new file mode 100644
index 00000000000..d5a6c7b1ec5
--- /dev/null
+++ b/upcoming_changelogs/6320.md
@@ -0,0 +1,2 @@
+- Added onFocus callback on EuiSuperDatePicker
+