fix(date): ensure that event contains input name and id when picker i…

…s used to change date

Ensure that the `onDayClick` is called with an event that contains the input `name` and `id`

fix #5193

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={<Navbar />}
-            enableOutsideDays
             fixedWeeks
             initialMonth={selectedDays || undefined}
             disabledDays={getDisabledDays(minDate, maxDate)}

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 = () => (
+    <div ref={ref}>
+      <input name="foo" id="bar" />
+    </div>
+  );
+  return (
+    <>
+      <Input />
+      <DatePicker inputElement={ref} {...props} />
+    </>
+  );
+};
+
 function renderI18n({ locale, ...props }) {
   return mount(
     <I18nProvider locale={locale}>
-      <DatePicker inputElement={inputElement} open {...props} />
+      <MockComponent open {...props} />
     </I18nProvider>
   );
 }
 
 function render(props, params) {
-  return mount(
-    <DatePicker inputElement={inputElement} open {...props} />,
-    params
-  );
+  return mount(<MockComponent open {...props} />, params);
 }

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;