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`
+