fix: datepicker onchange trigger issue (#16202)

* fix: datepicker onchange trigger issue * fix: range plugin * fix: added test case * fix: test case --------- Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
carbon-design-system · May 8, 2024 · 4c0d5a1 · 4c0d5a1
1 parent c405ed8
commit 4c0d5a1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 import DatePicker from './DatePicker';
 import DatePickerInput from '../DatePickerInput';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Slug } from '../Slug';
 
@@ -100,6 +100,37 @@ describe('DatePicker', () => {
     ).toBeInTheDocument();
   });
 
+  it('should not fire onChange handler when clicking outside the datepicker in range mode', () => {
+    const handleChange = jest.fn();
+    const { getByLabelText, getByText } = render(
+      <DatePicker
+        onChange={handleChange}
+        dateFormat="m/d/Y"
+        datePickerType="range">
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start date"
+        />
+        <DatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+        />
+      </DatePicker>
+    );
+    const startDateInput = getByLabelText('Start date');
+    const endDateInput = getByLabelText('End date');
+    // Change the dates
+    fireEvent.change(startDateInput, { target: { value: '01/01/2023' } });
+    fireEvent.change(endDateInput, { target: { value: '01/07/2023' } });
+    // Simulate a click event outside the datepicker
+    fireEvent.click(document.body);
+    fireEvent.focus(startDateInput);
+    fireEvent.click(document.body);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
   it('should render the children as expected', () => {
     render(
       <DatePicker onChange={() => {}} dateFormat="m/d/Y" datePickerType="range">

diff --git a/packages/react/src/components/DatePicker/plugins/rangePlugin.js b/packages/react/src/components/DatePicker/plugins/rangePlugin.js
@@ -18,11 +18,12 @@ export default (config) => {
         // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
         // where Flatpickr's range plugin takes care of fixing the first `<input>`
         if (!triggerChange) {
-          const { _input: inputFrom } = fp;
-          const { input: inputTo } = config;
-          [inputFrom, inputTo].forEach((input, i) => {
+          const { _input: inputDates } = fp;
+          const inputDatesArray = inputDates.value.split(' ');
+          fp.close();
+          [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
             if (input) {
-              input.value = !dates[i]
+              input = !dates[i]
                 ? ''
                 : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);
             }