Skip to content

[EuiSuperDatePicker] Support onFocus (#4924) #6320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 7, 2022
Merged

[EuiSuperDatePicker] Support onFocus (#4924) #6320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
12c045e
[EuiSuperDatePicker] Support onFocus (#4924)
UzairNoman Oct 22, 2022
feb1649
callback invoking multiple times.
UzairNoman Oct 28, 2022
b3aad72
Merge branch 'elastic:main' into onfocus-super-date-picker
UzairNoman Oct 28, 2022
0fec4de
[EuiSuperDatePicker] Updated the onFocus call on buttonProps and pret…
UzairNoman Nov 2, 2022
52717c0
Apply suggestions from code review
UzairNoman Nov 2, 2022
ffb6e14
[EuiSuperDatePicker] Updated super_date_picker's tests and onFocus on…
UzairNoman Nov 2, 2022
71e6086
[EuiSuperDatePicker] added test case for focus on superDatePickerShow…
UzairNoman Nov 6, 2022
87d75db
[EuiSuperDatePicker] prettier error resolved (#4924)
UzairNoman Nov 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/components/date_picker/super_date_picker/super_date_picker.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,36 @@ describe('EuiSuperDatePicker', () => {
);
});

it('invokes onFocus callbacks on the date popover buttons', () => {
const focusMock = jest.fn();
const component = mount(
<EuiSuperDatePicker
onTimeChange={noop}
showUpdateButton={false}
onFocus={focusMock}
/>
);

component
.find('button[data-test-subj="superDatePickerShowDatesButton"]')
.simulate('focus');
expect(focusMock).toBeCalledTimes(1);

component
.find('button[data-test-subj="superDatePickerShowDatesButton"]')
.simulate('click');
Comment on lines +185 to +187
Copy link
Contributor

@cee-chen cee-chen Nov 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This button should also be triggering the focus handler, so we should simulate focus on it as well

Suggested change
component
.find('button[data-test-subj="superDatePickerShowDatesButton"]')
.simulate('click');
component
.find('button[data-test-subj="superDatePickerShowDatesButton"]')
.simulate('click')
.simulate('focus');
expect(focusMock).toBeCalledTimes(1);


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(
Expand Down
11 changes: 10 additions & 1 deletion src/components/date_picker/super_date_picker/super_date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -393,6 +398,7 @@ export class EuiSuperDatePickerInternal extends Component<
timeFormat,
utcOffset,
compressed,
onFocus,
} = this.props;

if (
Expand All @@ -415,6 +421,7 @@ export class EuiSuperDatePickerInternal extends Component<
data-test-subj="superDatePickerShowDatesButton"
disabled={isDisabled}
onClick={this.hidePrettyDuration}
onFocus={onFocus}
>
<PrettyDuration
timeFrom={start}
Expand Down Expand Up @@ -454,6 +461,7 @@ export class EuiSuperDatePickerInternal extends Component<
onPopoverToggle={this.onStartDatePopoverToggle}
onPopoverClose={this.onStartDatePopoverClose}
timeOptions={timeOptions}
buttonProps={{ onFocus }}
/>
}
endDateControl={
Expand All @@ -474,6 +482,7 @@ export class EuiSuperDatePickerInternal extends Component<
onPopoverToggle={this.onEndDatePopoverToggle}
onPopoverClose={this.onEndDatePopoverClose}
timeOptions={timeOptions}
buttonProps={{ onFocus }}
/>
}
/>
Expand Down
2 changes: 2 additions & 0 deletions upcoming_changelogs/6320.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Added `onFocus` prop callback to `EuiSuperDatePicker`