[EuiSuperDatePicker] Support onFocus (#4924)

elastic · Oct 22, 2022 · 59ed2e4 · 59ed2e4
1 parent 8081fda
commit 59ed2e4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
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
@@ -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
@@ -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
@@ -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
@@ -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'];