From 0ee6d40bba8f26df53530d5a74b8c2bad40f0ecf Mon Sep 17 00:00:00 2001
From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
Date: Wed, 13 Nov 2024 21:58:51 +0530
Subject: [PATCH] fix(datepicker): adds Optional chaining (#18046)

* fix(datepicker): adds Optional chaining

* test(datepicker): adds test for console warnings
---
 .../components/DatePicker/DatePicker-test.js  | 41 +++++++++++++++++++
 .../DatePicker/plugins/fixEventsPlugin.js     |  4 +-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
index d1c9341e0d9e..2a99afeb8b81 100644
--- a/packages/react/src/components/DatePicker/DatePicker-test.js
+++ b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -712,4 +712,45 @@ describe('Date picker with minDate and maxDate', () => {
     await userEvent.keyboard('{escape}');
     expect(screen.getByRole('application')).not.toHaveClass('open');
   });
+  it('clearing end date should not cause console warnings', async () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    render(
+      <DatePicker onChange={() => {}} datePickerType="range" dateFormat="m/d/Y">
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start Date"
+          data-testid="input-value-start"
+        />
+        <DatePickerInput
+          id="date-picker-input-id-end"
+          placeholder="mm/dd/yyyy"
+          labelText="End Date"
+          data-testid="input-value-end"
+        />
+      </DatePicker>
+    );
+    await userEvent.type(
+      screen.getByLabelText('Start Date'),
+      '01/01/2024{enter}'
+    );
+    await userEvent.type(
+      screen.getByLabelText('End Date'),
+      '01/15/2024{enter}'
+    );
+
+    // Ensure the dates are correctly populated
+    expect(screen.getByLabelText('Start Date')).toHaveValue('01/01/2024');
+    expect(screen.getByLabelText('End Date')).toHaveValue('01/15/2024');
+
+    // Clear the end date
+    await userEvent.clear(screen.getByLabelText('End Date'));
+    expect(screen.getByLabelText('End Date')).toHaveValue('');
+
+    // Click on the start date input after clearing the end date
+    await userEvent.click(screen.getByLabelText('Start Date'));
+    expect(warn).not.toHaveBeenCalled();
+    warn.mockRestore();
+  });
 });
diff --git a/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js b/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
index e779049b72a5..831dbd63892e 100644
--- a/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
+++ b/packages/react/src/components/DatePicker/plugins/fixEventsPlugin.js
@@ -81,7 +81,7 @@ export default (config) => (fp) => {
     if (inputTo === target && fp.selectedDates[1]) {
       // Using getTime() enables the ability to more readily compare the date currently
       // selected in the calendar and the date currently in the value of the input
-      const withoutTime = (date) => date.setHours(0, 0, 0, 0);
+      const withoutTime = (date) => date?.setHours(0, 0, 0, 0);
       const selectedToDate = withoutTime(new Date(fp.selectedDates[1]));
       const currentValueToDate = withoutTime(
         parseDateWithFormat(inputTo.value)
@@ -104,7 +104,7 @@ export default (config) => (fp) => {
       }
     }
 
-    const isValidDate = (date) => date.toString() !== 'Invalid Date';
+    const isValidDate = (date) => date?.toString() !== 'Invalid Date';
     // save end date in calendar inmediately after it's been written down
     if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
       if (isValidDate(parseDateWithFormat(inputTo.value))) {