diff --git a/src/components/date_picker/date_picker_range.test.tsx b/src/components/date_picker/date_picker_range.test.tsx index 2b2463528c8..0f7fdd1c2bd 100644 --- a/src/components/date_picker/date_picker_range.test.tsx +++ b/src/components/date_picker/date_picker_range.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { render } from 'enzyme'; +import { render, mount } from 'enzyme'; import { requiredProps } from '../../test'; import { EuiDatePickerRange } from './date_picker_range'; @@ -79,4 +79,51 @@ describe('EuiDatePickerRange', () => { expect(component).toMatchSnapshot(); }); + + it('calls blur and focus handlers for date pickers while also triggering range control handlers', () => { + const rangeControlOnBlurMock = jest.fn(); + const rangeControlOnFocusMock = jest.fn(); + const startControlOnBlurMock = jest.fn(); + const startControlOnFocusMock = jest.fn(); + const endControlOnBlurMock = jest.fn(); + const endControlOnFocusMock = jest.fn(); + + const component = mount( + + } + endDateControl={ + + } + /> + ); + + const startControl = component.find('EuiDatePicker').at(0); + const endControl = component.find('EuiDatePicker').at(1); + + startControl.props().onFocus?.({} as React.FocusEvent); + expect(startControlOnFocusMock).toHaveBeenCalledTimes(1); + expect(rangeControlOnFocusMock).toHaveBeenCalledTimes(1); + + startControl.props().onBlur?.({} as React.FocusEvent); + expect(startControlOnBlurMock).toHaveBeenCalledTimes(1); + expect(rangeControlOnBlurMock).toHaveBeenCalledTimes(1); + + endControl.props().onFocus?.({} as React.FocusEvent); + expect(endControlOnFocusMock).toHaveBeenCalledTimes(1); + expect(rangeControlOnFocusMock).toHaveBeenCalledTimes(2); + + endControl.props().onBlur?.({} as React.FocusEvent); + expect(endControlOnBlurMock).toHaveBeenCalledTimes(1); + expect(rangeControlOnBlurMock).toHaveBeenCalledTimes(2); + }); }); diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 759b9d96dca..410dc335bb4 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -7,6 +7,8 @@ */ import React, { + FocusEvent, + FocusEventHandler, Fragment, FunctionComponent, ReactNode, @@ -60,7 +62,20 @@ export type EuiDatePickerRangeProps = CommonProps & { */ readOnly?: boolean; + /** + * Passes through to each control + */ fullWidth?: boolean; + + /** + * Triggered whenever the start or end controls are blurred + */ + onBlur?: FocusEventHandler; + + /** + * Triggered whenever the start or end controls are focused + */ + onFocus?: FocusEventHandler; }; export const EuiDatePickerRange: FunctionComponent = ({ @@ -74,6 +89,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ readOnly, isInvalid, disabled, + onFocus, + onBlur, ...rest }) => { const classes = classNames( @@ -104,6 +121,14 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__start', startDateControl.props.className ), + onBlur: (event: FocusEvent) => { + startDateControl.props?.onBlur?.(event); + onBlur?.(event); + }, + onFocus: (event: FocusEvent) => { + startDateControl.props?.onFocus?.(event); + onFocus?.(event); + }, } ); @@ -120,6 +145,14 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__end', endDateControl.props.className ), + onBlur: (event: FocusEvent) => { + endDateControl.props?.onBlur?.(event); + onBlur?.(event); + }, + onFocus: (event: FocusEvent) => { + endDateControl.props?.onFocus?.(event); + onFocus?.(event); + }, } ); } diff --git a/upcoming_changelogs/6136.md b/upcoming_changelogs/6136.md new file mode 100644 index 00000000000..3172a341789 --- /dev/null +++ b/upcoming_changelogs/6136.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `onBlur` and `onFocus` handlers from `EuiDatePickerRange` being incorrectly applied to wrapping element rather than the start/end control datepickers. +