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 d753a10e5c13..26ac81bd62df 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={ { ); }); + test('keyup or click on FCLayout or DatePickerRange should invoke onFocus on SuperDatePicker', () => { + const focusMock = jest.fn(); + + const componentFocus = mount( + + ); + + 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 06c5ab7a2937..1568ff9b735c 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; + /** * 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 + | React.MouseEvent + | any + ) => { + if (onFocus) onFocus(event); + }; + const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? ( 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 c585be791ac0..3c380e29520a 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) => void; append?: PrependAppendType; children?: ReactNode; icon?: EuiFormControlLayoutIconsProps['icon'];