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