[EuiSuperDatePicker] Updated the onFocus call on buttonProps and pret…

…tyDuration (elastic#4924)
UzairNoman · Nov 2, 2022 · 0fec4de · 0fec4de
1 parent b3aad72
commit 0fec4de
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 58 deletions.
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,8 +11,6 @@ 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]}
@@ -239,10 +237,18 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -338,8 +344,6 @@ 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]}
@@ -566,10 +570,18 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -665,8 +677,6 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
       className="euiSuperDatePicker"
       compressed={true}
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -893,10 +903,18 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -1028,8 +1046,6 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1289,8 +1305,6 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1517,10 +1531,18 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -1594,8 +1616,6 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -1822,10 +1842,18 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -1920,8 +1948,6 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -2148,10 +2174,18 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"
@@ -2246,8 +2280,6 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     <EuiFormControlLayout
       className="euiSuperDatePicker"
       isDisabled={false}
-      onClick={[Function]}
-      onKeyUp={[Function]}
       prepend={
         <EuiQuickSelectPopover
           applyTime={[Function]}
@@ -2474,10 +2506,18 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     >
       <EuiDatePickerRange
         className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
+        endDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
         iconType={false}
         isCustom={true}
-        startDateControl={<div />}
+        startDateControl={
+          <div
+            onFocus={[Function]}
+          />
+        }
       >
         <button
           className="euiSuperDatePicker__prettyFormat"

diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx
@@ -110,7 +110,6 @@ export const EuiDatePopoverButton: FunctionComponent<EuiDatePopoverButtonProps>
   const button = (
     <button
       onClick={onPopoverToggle}
-      onFocus={() => console.log('This is invoking twice')}
       className={classes}
       title={title}
       disabled={isDisabled}

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,19 +167,13 @@ describe('EuiSuperDatePicker', () => {
       );
     });
 
-    test('keyup or click on FCLayout or DatePickerRange should invoke onFocus on SuperDatePicker', () => {
+    test('should invoke onFocus on SuperDatePicker', () => {
       const focusMock = jest.fn();
-
-      const componentFocus = mount<EuiSuperDatePickerInternal>(
+      const componentFocus = shallow<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);
+      componentFocus.dive().simulate('focus');
+      expect(focusMock).toBeCalledTimes(1);
     });
 
     describe('showUpdateButton', () => {

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
@@ -90,7 +90,7 @@ export type EuiSuperDatePickerProps = CommonProps & {
   /**
    * Triggered whenever the EuiSuperDatePicker is focused
    */
-  onFocus?: FocusEventHandler<HTMLDivElement>;
+  onFocus?: FocusEventHandler;
 
   /**
    * Callback for when the refresh interval is fired.
@@ -398,8 +398,12 @@ export class EuiSuperDatePickerInternal extends Component<
       timeFormat,
       utcOffset,
       compressed,
+      onFocus,
     } = this.props;
 
+    const handleFocusActivity = (e: React.FocusEvent) => {
+      onFocus?.(e);
+    };
     if (
       showPrettyDuration &&
       !isStartDatePopoverOpen &&
@@ -410,8 +414,8 @@ export class EuiSuperDatePickerInternal extends Component<
           className="euiDatePickerRange--inGroup"
           iconType={false}
           isCustom
-          startDateControl={<div />}
-          endDateControl={<div />}
+          startDateControl={<div onFocus={(e) => handleFocusActivity(e)} />}
+          endDateControl={<div onFocus={(e) => handleFocusActivity(e)} />}
         >
           <button
             className={classNames('euiSuperDatePicker__prettyFormat', {
@@ -459,6 +463,7 @@ export class EuiSuperDatePickerInternal extends Component<
                 onPopoverToggle={this.onStartDatePopoverToggle}
                 onPopoverClose={this.onStartDatePopoverClose}
                 timeOptions={timeOptions}
+                buttonProps={{ onFocus: (e) => handleFocusActivity(e) }}
               />
             }
             endDateControl={
@@ -479,6 +484,7 @@ export class EuiSuperDatePickerInternal extends Component<
                 onPopoverToggle={this.onEndDatePopoverToggle}
                 onPopoverClose={this.onEndDatePopoverClose}
                 timeOptions={timeOptions}
+                buttonProps={{ onFocus: (e) => handleFocusActivity(e) }}
               />
             }
           />
@@ -538,7 +544,6 @@ export class EuiSuperDatePickerInternal extends Component<
       isDisabled,
       isPaused,
       onRefreshChange,
-      onFocus,
       recentlyUsedRanges,
       refreshInterval,
       showUpdateButton,
@@ -553,15 +558,6 @@ 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"
@@ -627,8 +623,6 @@ 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,8 +39,6 @@ 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'];