fix: select the same day in range mode when range is open and min prop is 0 (#2816)

* examples: add RangeResetSelection

* Allow selecting range with equal from and to dates

* Add RangeResetSelection tests

* fix lint

Author: rodgobbi

examples/RangeResetSelection.test.tsx

@@ -0,0 +1,41 @@
+import { screen } from "@testing-library/react";
+import { addDays } from "date-fns";
+import React from "react";
+import { dateButton } from "@/test/elements";
+import { render } from "@/test/render";
+import { user } from "@/test/user";
+import { RangeResetSelection } from "./RangeResetSelection";
+
+const today = new Date(2022, 8, 12);
+
+beforeAll(() => jest.setSystemTime(today));
+afterAll(() => jest.useRealTimers());
+
+beforeEach(() => render(<RangeResetSelection />));
+
+const getFrom = () => screen.getByTestId("from");
+const getTo = () => screen.getByTestId("to");
+
+test("select same day range", async () => {
+  await user.click(dateButton(today));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-12");
+  expect(getTo()).toHaveTextContent("to:");
+  await user.click(dateButton(today));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-12");
+  expect(getTo()).toHaveTextContent("to: 2022-09-12");
+});
+
+test("start range after click on day with range selected", async () => {
+  await user.click(dateButton(today));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-12");
+  expect(getTo()).toHaveTextContent("to:");
+  await user.click(dateButton(addDays(today, 1)));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-12");
+  expect(getTo()).toHaveTextContent("to: 2022-09-13");
+  await user.click(dateButton(addDays(today, 4)));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-16");
+  expect(getTo()).toHaveTextContent("to:");
+  await user.click(dateButton(today));
+  expect(getFrom()).toHaveTextContent("from: 2022-09-12");
+  expect(getTo()).toHaveTextContent("to: 2022-09-16");
+});

examples/RangeResetSelection.tsx

@@ -0,0 +1,49 @@
+import { format } from "date-fns";
+import React, { useState } from "react";
+
+import {
+  type DateRange,
+  type DayEventHandler,
+  DayPicker,
+  type OnSelectHandler,
+} from "react-day-picker";
+
+export function RangeResetSelection() {
+  const [selected, setSelected] = useState<DateRange>();
+
+  // use onSelect event which properly handles valid range selection
+  // based on valid days in the calendar
+  const handleSelect: OnSelectHandler<DateRange | undefined> = (range) => {
+    // the other cases are handled by onDayClick handler
+    if (selected?.from && !selected.to) {
+      setSelected(range);
+    }
+  };
+
+  const handleDayClick: DayEventHandler<React.MouseEvent> = (date) => {
+    // handled by onSelect handler
+    if (selected?.from && !selected.to) {
+      return;
+    }
+    setSelected({ from: date });
+  };
+
+  return (
+    <DayPicker
+      mode="range"
+      selected={selected}
+      onSelect={handleSelect}
+      onDayClick={handleDayClick}
+      footer={
+        <div>
+          <p data-testid="from">
+            from: {selected?.from && format(selected?.from, "yyyy-MM-dd")}
+          </p>
+          <p data-testid="to">
+            to: {selected?.to && format(selected?.to, "yyyy-MM-dd")}
+          </p>
+        </div>
+      }
+    />
+  );
+}

examples/index.ts

@@ -68,6 +68,7 @@ export * from "./RangeLong";
 export * from "./RangeLongExcludeDisabled";
 export * from "./RangeMinMax";
 export * from "./RangeRequired";
+export * from "./RangeResetSelection";
 export * from "./RangeShiftKey";
 export * from "./Rtl";
 export * from "./Single";

src/utils/addToRange.test.ts

@@ -13,12 +13,24 @@ describe("addToRange", () => {
     expect(range).toEqual({ from: date, to: date });
   });
 
-  test("add a date to an incomplete range with same start date", () => {
+  test("add a date to an incomplete range with same start date and min = 0", () => {
     const date = new Date(2022, 0, 1);
     const range = addToRange(date, { from: date, to: undefined });
+    expect(range).toEqual({ from: date, to: date });
+  });
+
+  test("add a date to an incomplete range with same start date and min > 0", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: date, to: undefined }, 1, 0, false);
     expect(range).toEqual(undefined);
   });
 
+  test("add a date to an incomplete range with same start date and min > 0 and required", () => {
+    const date = new Date(2022, 0, 1);
+    const range = addToRange(date, { from: date, to: undefined }, 1, 0, true);
+    expect(range).toEqual({ from: date, to: undefined });
+  });
+
   test("add a date to an incomplete range with earlier date", () => {
     const from = new Date(2022, 0, 1);
     const earlierDate = new Date(2021, 11, 31);

src/utils/addToRange.ts

@@ -34,7 +34,9 @@ export function addToRange(
     // adding date to an incomplete range
     if (isSameDay(from, date)) {
       // adding a date equal to the start of the range
-      if (required) {
+      if (min === 0) {
+        range = { from, to: date };
+      } else if (required) {
         range = { from, to: undefined };
       } else {
         range = undefined;