From 25524b313ed14381a814e87359f5ebe6c9a2df39 Mon Sep 17 00:00:00 2001 From: Anthony Hastings Date: Fri, 12 Aug 2022 11:55:54 +0100 Subject: [PATCH 1/3] Applying onFocus/OnBlur handlers to inner EuiDatePicker components. --- .../date_picker/date_picker_range.test.tsx | 49 ++++++++++++++++++- .../date_picker/date_picker_range.tsx | 20 ++++++++ 2 files changed, 68 insertions(+), 1 deletion(-) 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..2a352929bae 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -18,6 +18,7 @@ import classNames from 'classnames'; import { IconType, EuiIcon } from '../icon'; import { CommonProps } from '../common'; import { EuiDatePickerProps } from './date_picker'; +import over from 'lodash/over'; export type EuiDatePickerRangeProps = CommonProps & { /** @@ -60,7 +61,20 @@ export type EuiDatePickerRangeProps = CommonProps & { */ readOnly?: boolean; + /** + * Passes through to each control + */ fullWidth?: boolean; + + /** + * Triggered whenever the start or end controls are blurred + */ + onBlur?: (...args: any[]) => void; + + /** + * Triggered whenever the start or end controls are focused + */ + onFocus?: (...args: any[]) => void; }; export const EuiDatePickerRange: FunctionComponent = ({ @@ -74,6 +88,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ readOnly, isInvalid, disabled, + onFocus, + onBlur, ...rest }) => { const classes = classNames( @@ -104,6 +120,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__start', startDateControl.props.className ), + onBlur: over([startDateControl.props.onBlur, onBlur]), + onFocus: over([startDateControl.props.onFocus, onFocus]), } ); @@ -120,6 +138,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__end', endDateControl.props.className ), + onBlur: over([endDateControl.props.onBlur, onBlur]), + onFocus: over([endDateControl.props.onFocus, onFocus]), } ); } From 2b9381dc5659601e56164908a334df6c3e4fdd40 Mon Sep 17 00:00:00 2001 From: Anthony Hastings Date: Mon, 15 Aug 2022 09:03:51 +0100 Subject: [PATCH 2/3] Adding upcoming changelog entry --- upcoming_changelogs/6136.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 upcoming_changelogs/6136.md 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. + From 3ab1456291ec104096e645e0721965fbfb468a96 Mon Sep 17 00:00:00 2001 From: Anthony Hastings Date: Mon, 15 Aug 2022 09:25:25 +0100 Subject: [PATCH 3/3] removing use of lodash from EuiDatePickerRange --- .../date_picker/date_picker_range.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 2a352929bae..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, @@ -18,7 +20,6 @@ import classNames from 'classnames'; import { IconType, EuiIcon } from '../icon'; import { CommonProps } from '../common'; import { EuiDatePickerProps } from './date_picker'; -import over from 'lodash/over'; export type EuiDatePickerRangeProps = CommonProps & { /** @@ -69,12 +70,12 @@ export type EuiDatePickerRangeProps = CommonProps & { /** * Triggered whenever the start or end controls are blurred */ - onBlur?: (...args: any[]) => void; + onBlur?: FocusEventHandler; /** * Triggered whenever the start or end controls are focused */ - onFocus?: (...args: any[]) => void; + onFocus?: FocusEventHandler; }; export const EuiDatePickerRange: FunctionComponent = ({ @@ -120,8 +121,14 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__start', startDateControl.props.className ), - onBlur: over([startDateControl.props.onBlur, onBlur]), - onFocus: over([startDateControl.props.onFocus, onFocus]), + onBlur: (event: FocusEvent) => { + startDateControl.props?.onBlur?.(event); + onBlur?.(event); + }, + onFocus: (event: FocusEvent) => { + startDateControl.props?.onFocus?.(event); + onFocus?.(event); + }, } ); @@ -138,8 +145,14 @@ export const EuiDatePickerRange: FunctionComponent = ({ 'euiDatePickerRange__end', endDateControl.props.className ), - onBlur: over([endDateControl.props.onBlur, onBlur]), - onFocus: over([endDateControl.props.onFocus, onFocus]), + onBlur: (event: FocusEvent) => { + endDateControl.props?.onBlur?.(event); + onBlur?.(event); + }, + onFocus: (event: FocusEvent) => { + endDateControl.props?.onFocus?.(event); + onFocus?.(event); + }, } ); }