refactor: rewrite rangePlugin in typescript (#20401)

Author: adamalston

packages/react/src/components/DatePicker/DatePicker-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -866,6 +866,88 @@ describe('Range date picker', () => {
     expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
     consoleWarnSpy.mockRestore();
   });
+
+  describe('rangePlugin', () => {
+    it('should set start and end input values correctly when calling setDate with triggerChange=false', async () => {
+      const ref = React.createRef();
+
+      render(
+        <DatePicker ref={ref} datePickerType="range" value={undefined}>
+          <DatePickerInput
+            id="start"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+            data-testid="start-input"
+          />
+          <DatePickerInput
+            id="end"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+            data-testid="end-input"
+          />
+        </DatePicker>
+      );
+
+      const fp = ref.current.calendar;
+      const start = await screen.findByTestId('start-input');
+      const end = await screen.findByTestId('end-input');
+
+      // Call `setDate` with two dates and `triggerChange` equal to `false`,
+      // which is where the `rangePlugin` logic should be triggered to set
+      // values on both inputs.
+      fp.setDate(['01/05/2025', '01/10/2025'], false, 'm/d/Y');
+
+      expect(start.value).toBe('01/05/2025');
+      expect(end.value).toBe('01/10/2025');
+
+      // Verify clearing the end date keeps the start date while clearing the
+      // end date.
+      fp.setDate(['01/15/2025', null], false, 'm/d/Y');
+
+      expect(start.value).toBe('01/15/2025');
+      expect(end.value).toBe('');
+
+      // Verify that calling `setDate` again with both dates updates both
+      // fields.
+      fp.setDate(['02/01/2025', '02/14/2025'], false, 'm/d/Y');
+
+      expect(start.value).toBe('02/01/2025');
+      expect(end.value).toBe('02/14/2025');
+    });
+
+    it('should not write both dates into the first input', async () => {
+      const ref = React.createRef();
+
+      render(
+        <DatePicker ref={ref} datePickerType="range" value={undefined}>
+          <DatePickerInput
+            id="start-2"
+            placeholder="mm/dd/yyyy"
+            labelText="Start date"
+            data-testid="start-input-2"
+          />
+          <DatePickerInput
+            id="end-2"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+            data-testid="end-input-2"
+          />
+        </DatePicker>
+      );
+
+      const fp = ref.current.calendar;
+      const start = await screen.findByTestId('start-input-2');
+      const end = await screen.findByTestId('end-input-2');
+
+      // When `triggerChange` is `false`, flatpickr's default behavior could
+      // leave both dates reflected only in the first input. The plugin should
+      // ensure each input is updated correctly.
+      fp.setDate(['03/03/2025', '03/09/2025'], false, 'm/d/Y');
+
+      expect(start.value).toBe('03/03/2025');
+      expect(end.value).toBe('03/09/2025');
+    });
+  });
 });
 
 describe('Date picker with locale', () => {

packages/react/src/components/DatePicker/DatePicker.tsx

@@ -22,7 +22,7 @@ import l10n from 'flatpickr/dist/l10n/index';
 import DatePickerInput from '../DatePickerInput';
 import { appendToPlugin } from './plugins/appendToPlugin';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin';
-import carbonFlatpickrRangePlugin from './plugins/rangePlugin';
+import { rangePlugin } from './plugins/rangePlugin';
 import { deprecate } from '../../prop-types/deprecate';
 import { match, keys } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
@@ -194,19 +194,7 @@ function updateClassNames(calendar, prefix) {
 }
 
 export type DatePickerTypes = 'simple' | 'single' | 'range';
-export type CalRef = {
-  inline: boolean;
-  disableMobile: boolean;
-  defaultDate: Date;
-  closeOnSelect: (evt: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  mode: 'simple' | 'single' | 'range';
-  allowInput: boolean;
-  dateFormat: string;
-  locale: string;
-  plugins: [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
-  clickOpens: any;
-};
+
 export interface DatePickerProps {
   /**
    * Flatpickr prop passthrough enables direct date input, and when set to false,
@@ -498,8 +486,8 @@ const DatePicker = React.forwardRef(function DatePicker(
     }
   }, [calendarCloseEvent, handleCalendarClose]);
 
-  const endInputField = useRef<HTMLTextAreaElement>(null);
-  const lastFocusedField = useRef<HTMLTextAreaElement>(null);
+  const endInputField = useRef<HTMLInputElement>(null);
+  const lastFocusedField = useRef<HTMLInputElement>(null);
   const savedOnChange = useSavedCallback(onChange);
 
   const savedOnOpen = useSavedCallback(onOpen);
@@ -657,8 +645,8 @@ const DatePicker = React.forwardRef(function DatePicker(
       parseDate: parseDate,
       plugins: [
         datePickerType === 'range'
-          ? carbonFlatpickrRangePlugin({
-              input: endInputField.current,
+          ? rangePlugin({
+              input: endInputField.current ?? undefined,
             })
           : () => {},
         appendTo

packages/react/src/components/DatePicker/plugins/rangePlugin.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright IBM Corp. 2019, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import baseRangePlugin, {
+  type Config,
+} from 'flatpickr/dist/plugins/rangePlugin';
+import { Instance } from 'flatpickr/dist/types/instance';
+
+/**
+ * @param config Plugin configuration.
+ * @returns An extension of Flatpickr `rangePlugin` that does the following:
+ *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
+ *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
+ *   * A logic to ensure `fp.setDate()` call won't end up with "startDate to endDate" set to the first `<input>`
+ */
+export const rangePlugin = (config: Config = {}) => {
+  const factory = baseRangePlugin(Object.assign({ position: 'left' }, config));
+  return (fp: Instance) => {
+    const { setDate: origSetDate } = fp;
+
+    const init = () => {
+      fp.setDate = (dates, triggerChange, format) => {
+        origSetDate(dates, triggerChange, format);
+        // If `triggerChange` is `true`, `onValueUpdate` Flatpickr event is fired
+        // where Flatpickr's range plugin takes care of fixing the first `<input>`
+        if (!triggerChange && Array.isArray(dates) && dates.length === 2) {
+          const { formatDate, _input: inputFrom } = fp;
+          const { input: inputTo } = config;
+          const inputToElement =
+            typeof inputTo === 'string'
+              ? document.querySelector(inputTo)
+              : inputTo;
+
+          [inputFrom, inputToElement].forEach((input, i) => {
+            if (input && input instanceof HTMLInputElement) {
+              input.value = !dates[i]
+                ? ''
+                : formatDate(new Date(dates[i]), fp.config.dateFormat);
+            }
+          });
+        }
+      };
+    };
+
+    const origRangePlugin = factory(fp);
+    const { onReady: origOnReady } = origRangePlugin;
+
+    return Object.assign(origRangePlugin, {
+      onReady: [init, origOnReady],
+      onPreCalendarPosition: () => {},
+    });
+  };
+};