[EuiDatePickerRange] Applying onFocus/OnBlur handlers to inner EuiDatePicker components

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(
+      <EuiDatePickerRange
+        onBlur={rangeControlOnBlurMock}
+        onFocus={rangeControlOnFocusMock}
+        startDateControl={
+          <EuiDatePicker
+            onBlur={startControlOnBlurMock}
+            onFocus={startControlOnFocusMock}
+          />
+        }
+        endDateControl={
+          <EuiDatePicker
+            onBlur={endControlOnBlurMock}
+            onFocus={endControlOnFocusMock}
+          />
+        }
+      />
+    );
+
+    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);
+  });
 });

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<HTMLInputElement>;
+
+  /**
+   * Triggered whenever the start or end controls are focused
+   */
+  onFocus?: FocusEventHandler<HTMLInputElement>;
 };
 
 export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
@@ -74,6 +89,8 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   readOnly,
   isInvalid,
   disabled,
+  onFocus,
+  onBlur,
   ...rest
 }) => {
   const classes = classNames(
@@ -104,6 +121,14 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
           'euiDatePickerRange__start',
           startDateControl.props.className
         ),
+        onBlur: (event: FocusEvent<HTMLInputElement>) => {
+          startDateControl.props?.onBlur?.(event);
+          onBlur?.(event);
+        },
+        onFocus: (event: FocusEvent<HTMLInputElement>) => {
+          startDateControl.props?.onFocus?.(event);
+          onFocus?.(event);
+        },
       }
     );
 
@@ -120,6 +145,14 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
           'euiDatePickerRange__end',
           endDateControl.props.className
         ),
+        onBlur: (event: FocusEvent<HTMLInputElement>) => {
+          endDateControl.props?.onBlur?.(event);
+          onBlur?.(event);
+        },
+        onFocus: (event: FocusEvent<HTMLInputElement>) => {
+          endDateControl.props?.onFocus?.(event);
+          onFocus?.(event);
+        },
       }
     );
   }

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