From 7376122249f374eba87870359c5cd24da5459613 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Wed, 8 Jun 2022 11:14:38 +0100 Subject: [PATCH] fix(date): ensure that event contains input name and id when picker is used to change date Ensure that the `onDayClick` is called with an event that contains the input `name` and `id` fix #5193 --- .../date-picker/date-picker.component.js | 7 +++- .../date-picker/date-picker.spec.js | 31 +++++++++++------ src/components/date/date.spec.js | 33 +++++++++++++++++++ 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/src/components/date/__internal__/date-picker/date-picker.component.js b/src/components/date/__internal__/date-picker/date-picker.component.js index 79d3c646a6..5106da65d1 100644 --- a/src/components/date/__internal__/date-picker/date-picker.component.js +++ b/src/components/date/__internal__/date-picker/date-picker.component.js @@ -81,6 +81,12 @@ const DatePicker = React.forwardRef( const handleDayClick = (date, { disabled }, ev) => { if (!disabled) { + const { id, name } = inputElement?.current?.firstChild; + ev.target = { + ...ev.target, + id, + name, + }; onDayClick(date, ev); } }; @@ -119,7 +125,6 @@ const DatePicker = React.forwardRef( ); }} navbarElement={} - enableOutsideDays fixedWeeks initialMonth={selectedDays || undefined} disabledDays={getDisabledDays(minDate, maxDate)} diff --git a/src/components/date/__internal__/date-picker/date-picker.spec.js b/src/components/date/__internal__/date-picker/date-picker.spec.js index 3c836766be..40d2a8cffb 100644 --- a/src/components/date/__internal__/date-picker/date-picker.spec.js +++ b/src/components/date/__internal__/date-picker/date-picker.spec.js @@ -33,9 +33,6 @@ const timeZone = "Europe/London"; const getZonedDate = (date) => utcToZonedTime(new Date(date), timeZone); -const inputElement = { - getBoundingClientRect: () => ({ left: 0, bottom: 0 }), -}; const firstDate = "2019-02-02"; const secondDate = "2019-02-08"; const invalidDate = "2019-02-"; @@ -139,13 +136,15 @@ describe("DatePicker", () => { }); describe("without a disabled modifier", () => { - it('then "onDayClick" prop should have been called with the same date', () => { + it('then "onDayClick" prop should have been called with the same date and event target composition', () => { const date = new Date(firstDate); act(() => { wrapper.find(DayPicker).prop("onDayClick")(date, {}, { target: {} }); }); - expect(onDayClickFn).toHaveBeenCalledWith(date, { target: {} }); + expect(onDayClickFn).toHaveBeenCalledWith(date, { + target: { id: "bar", name: "foo" }, + }); }); }); @@ -281,17 +280,29 @@ describe("StyledDayPicker", () => { }); }); +const MockComponent = (props) => { + const ref = React.useRef(); + const Input = () => ( +
+ +
+ ); + return ( + <> + + + + ); +}; + function renderI18n({ locale, ...props }) { return mount( - + ); } function render(props, params) { - return mount( - , - params - ); + return mount(, params); } diff --git a/src/components/date/date.spec.js b/src/components/date/date.spec.js index a6dadc8f9e..615b973f2b 100644 --- a/src/components/date/date.spec.js +++ b/src/components/date/date.spec.js @@ -103,6 +103,8 @@ describe("Date", () => { eventValues(ev.target.value); }} allowEmptyValue={emptyValue} + name="Foo" + id="Bar" /> ); }; @@ -138,6 +140,7 @@ describe("Date", () => { } container = null; + wrapper?.unmount(); }); it("the component's input should be focused and picker should exist when prop is true", () => { @@ -576,6 +579,8 @@ describe("Date", () => { } container = null; + + wrapper?.unmount(); }); it("should return focus to the date input and close the DatePicker", () => { @@ -587,6 +592,34 @@ describe("Date", () => { expect(wrapper.update().find("input").prop("value")).toBe("01/01/2021"); }); + it("should call onChange with the expected event target composition", () => { + const onChangeFn = jest.fn(); + + wrapper = render({ onChange: onChangeFn, name: "foo", id: "bar" }); + simulateFocusOnInput(wrapper); + jest.clearAllMocks(); + act(() => { + wrapper + .update() + .find(DayPicker) + .props() + .onDayClick(mockDate, {}, { target: {} }); + }); + + expect(onChangeFn).toHaveBeenCalledWith( + expect.objectContaining({ + target: { + id: "bar", + name: "foo", + value: { + formattedValue: "01/01/2021", + rawValue: "2021-01-01", + }, + }, + }) + ); + }); + describe("when the disabled modifier is set", () => { let onChangeFn;