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..d1cb489f6d3 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,36 @@ describe('EuiSuperDatePicker', () => { ); }); + it('invokes onFocus callbacks on the date popover buttons', () => { + const focusMock = jest.fn(); + const component = mount( + + ); + + 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( 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..13d1796a204 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'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} > } endDateControl={ @@ -474,6 +482,7 @@ export class EuiSuperDatePickerInternal extends Component< onPopoverToggle={this.onEndDatePopoverToggle} onPopoverClose={this.onEndDatePopoverClose} timeOptions={timeOptions} + buttonProps={{ onFocus }} /> } /> diff --git a/upcoming_changelogs/6320.md b/upcoming_changelogs/6320.md new file mode 100644 index 00000000000..9990940c9f6 --- /dev/null +++ b/upcoming_changelogs/6320.md @@ -0,0 +1,2 @@ +- Added `onFocus` prop callback to `EuiSuperDatePicker` +