fix(datepicker): adds Optional chaining (#18046)

* fix(datepicker): adds Optional chaining * test(datepicker): adds test for console warnings
carbon-design-system · Nov 13, 2024 · 0ee6d40 · 0ee6d40
1 parent 5cf7bff
commit 0ee6d40
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git 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
@@ -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))) {