Fix and test turning goToRangeStartOnSelect off

wojtekmaj · May 23, 2023 · 6227cef · 6227cef
1 parent f56c7ae
commit 6227cef
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 2 deletions.
diff --git a/src/Calendar.spec.tsx b/src/Calendar.spec.tsx
@@ -4,6 +4,7 @@ import { act, render } from '@testing-library/react';
 import { getMonthStart } from '@wojtekmaj/date-utils';
 
 import Calendar from './Calendar';
+import { LooseValue } from './shared/types';
 
 const { format } = new Intl.DateTimeFormat('en-US', {
   day: 'numeric',
@@ -707,6 +708,85 @@ describe('Calendar', () => {
 
       expect(onActiveStartDateChange).not.toHaveBeenCalled();
     });
+
+    it('returns to start of range when range is completed', () => {
+      const onActiveStartDateChange = vi.fn();
+
+      const initialRange: LooseValue = [new Date(2017, 0, 10), null];
+
+      const { container } = render(
+        <Calendar
+          view="month"
+          selectRange
+          onActiveStartDateChange={onActiveStartDateChange}
+          defaultValue={initialRange}
+        />,
+      );
+
+      const nextMonthButton = container.querySelector(
+        'button.react-calendar__navigation__next-button',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        nextMonthButton.click();
+      });
+      // Disregard the call on the above button click
+      onActiveStartDateChange.mockClear();
+
+      // First day not in the previous month
+      const firstDayTile = container.querySelector(
+        '.react-calendar__tile:not([react-calendar__month-view__days__day--weekend])',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        firstDayTile.click();
+      });
+
+      expect(onActiveStartDateChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          action: 'onChange',
+          activeStartDate: new Date(2017, 0, 1),
+          view: 'month',
+        }),
+      );
+    });
+
+    it('does not change activeStartDate on range completion when goToRangeStartOnSelect is set to false', () => {
+      const onActiveStartDateChange = vi.fn();
+
+      const initialRange: LooseValue = new Date(2017, 0, 10);
+
+      const { container } = render(
+        <Calendar
+          view="month"
+          selectRange
+          onActiveStartDateChange={onActiveStartDateChange}
+          defaultValue={initialRange}
+          goToRangeStartOnSelect={false}
+        />,
+      );
+
+      const nextMonthButton = container.querySelector(
+        'button.react-calendar__navigation__next-button',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        nextMonthButton.click();
+      });
+      // Disregard the call on the above button click
+      onActiveStartDateChange.mockClear();
+
+      // First day not in the previous month
+      const firstDayTile = container.querySelector(
+        '.react-calendar__tile:not([react-calendar__month-view__days__day--weekend])',
+      ) as HTMLButtonElement;
+
+      act(() => {
+        firstDayTile.click();
+      });
+
+      expect(onActiveStartDateChange).not.toHaveBeenCalled();
+    });
   });
 
   describe('handles view change properly', () => {

diff --git a/src/Calendar.tsx b/src/Calendar.tsx
@@ -496,7 +496,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     this.setState(nextState, () => {
       const args = {
         action: nextState.action,
-        activeStartDate: nextState.activeStartDate || this.activeStartDate,
+        activeStartDate: nextState.activeStartDate || prevArgs.activeStartDate,
         value: ('value' in nextState && nextState.value) || this.value,
         view: ('view' in nextState && nextState.view) || this.view,
       };
@@ -691,7 +691,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
             ...(this.props as CalendarPropsWithDefaults),
             value: nextValue,
           })
-        : null;
+        : this.activeStartDate;
 
     event.persist();