sync segment input and calendar month shown

Author: aresnik11

packages/gamut/src/DatePicker/DatePickerCalendar/Calendar/utils/__tests__/dateGrid.test.ts

@@ -4,6 +4,7 @@ import {
   getWeekdayOffsetInGrid,
   isDateDisabled,
   isDateInRange,
+  isDateWithinVisibleMonths,
   isSameDay,
   matchDisabledDates,
 } from '../dateGrid';
@@ -117,6 +118,41 @@ describe('isDateDisabled', () => {
   });
 });
 
+describe('isDateWithinVisibleMonths', () => {
+  const march2024 = new Date(2024, 2, 1);
+  const april2024 = new Date(2024, 3, 15);
+
+  it('returns true when the date is in the left visible month', () => {
+    expect(
+      isDateWithinVisibleMonths({
+        date: new Date(2024, 2, 20),
+        startOfLeftVisibleMonth: march2024,
+        showSecondMonth: false,
+      })
+    ).toBe(true);
+  });
+
+  it('returns true when the date is in the second column month in a two-month layout', () => {
+    expect(
+      isDateWithinVisibleMonths({
+        date: april2024,
+        startOfLeftVisibleMonth: march2024,
+        showSecondMonth: true,
+      })
+    ).toBe(true);
+  });
+
+  it('returns false when the date is outside the visible month(s)', () => {
+    expect(
+      isDateWithinVisibleMonths({
+        date: new Date(2024, 4, 1),
+        startOfLeftVisibleMonth: march2024,
+        showSecondMonth: true,
+      })
+    ).toBe(false);
+  });
+});
+
 describe('getDatesWithRow', () => {
   it('lists only non-null dates with row indices', () => {
     const weeks = getMonthGrid({ year: 2024, month: 0, firstWeekday: 1 });

packages/gamut/src/DatePicker/DatePickerCalendar/Calendar/utils/dateGrid.ts

@@ -148,7 +148,12 @@ export const isDateInRange = ({
  *
  * @example
  * ```tsx
- * <DatePicker shouldDisableDate={matchDisabledDates([new Date(2026, 3, 14)])} />
+ * <DatePicker
+ *   mode="single"
+ *   selectedDate={null}
+ *   onSelected={() => {}}
+ *   shouldDisableDate={matchDisabledDates([new Date(2026, 3, 14)])}
+ * />
  * ```
  */
 export const matchDisabledDates =
@@ -184,27 +189,30 @@ export const addMonths = ({ date, n }: { date: Date; n: number }) =>
   new Date(date.getFullYear(), date.getMonth() + n, 1);
 
 /**
- * True when `date` falls in the left visible month (`displayDate`) or, when two months are
- * shown, the following month. Used to avoid jumping the strip when the user selects a day
- * already visible, while still syncing when the selection moves off-strip (e.g. typed input).
+ * True if `date` falls in the left visible month, or—when `showSecondMonth`—in the
+ * month shown in the second column. Used to avoid shifting the visible month pair when
+ * the committed date is already on screen (e.g. a click in the right-hand month).
  */
-export const isDateInVisibleCalendarStrip = ({
+export const isDateWithinVisibleMonths = ({
   date,
-  displayDate,
-  showTwoMonths,
+  startOfLeftVisibleMonth,
+  showSecondMonth,
 }: {
   date: Date;
-  displayDate: Date;
-  showTwoMonths: boolean;
-}): boolean => {
-  const y = date.getFullYear();
-  const m = date.getMonth();
-  const d0y = displayDate.getFullYear();
-  const d0m = displayDate.getMonth();
-  if (y === d0y && m === d0m) return true;
-  if (showTwoMonths) {
-    const second = addMonths({ date: displayDate, n: 1 });
-    return y === second.getFullYear() && m === second.getMonth();
+  /** First day of the month rendered in the left calendar column (`displayDate`). */
+  startOfLeftVisibleMonth: Date;
+  showSecondMonth: boolean;
+}) => {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const leftYear = startOfLeftVisibleMonth.getFullYear();
+  const leftMonth = startOfLeftVisibleMonth.getMonth();
+  if (year === leftYear && month === leftMonth) return true;
+  if (showSecondMonth) {
+    const rightMonthStart = addMonths({ date: startOfLeftVisibleMonth, n: 1 });
+    const rightYear = rightMonthStart.getFullYear();
+    const rightMonth = rightMonthStart.getMonth();
+    return year === rightYear && month === rightMonth;
   }
   return false;
 };

packages/gamut/src/DatePicker/DatePickerCalendar/index.tsx

@@ -19,7 +19,11 @@ import {
   CalendarWrapper,
 } from './Calendar';
 import type { CalendarBodyProps } from './Calendar/types';
-import { addMonths, getFirstOfMonth } from './Calendar/utils/dateGrid';
+import {
+  addMonths,
+  getFirstOfMonth,
+  isDateWithinVisibleMonths,
+} from './Calendar/utils/dateGrid';
 import {
   applyRangeOrNewStart,
   handleDateSelectRange,
@@ -85,8 +89,17 @@ export const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
   const selectedDate = isRange ? context.startDate : context.selectedDate;
   const endDate = isRange ? context.endDate : undefined;
   const setActiveRangePart = isRange ? context.setActiveRangePart : undefined;
+  const activeRangePart = isRange ? context.activeRangePart : null;
+
+  /** Committed value that should drive the visible month when it changes (input, grid, or quick actions). */
+  const anchorDate = useMemo((): Date | null => {
+    if (!isRange) return selectedDate ?? null;
+    if (activeRangePart === 'end') return endDate ?? selectedDate ?? null;
+    return selectedDate ?? endDate ?? null;
+  }, [isRange, selectedDate, endDate, activeRangePart]);
+
   const [displayDate, setDisplayDate] = useState(() =>
-    getFirstOfMonth(selectedDate ?? new Date())
+    getFirstOfMonth(anchorDate ?? selectedDate ?? endDate ?? new Date())
   );
   const [focusedDate, setFocusedDate] = useState<Date | null>(
     () => selectedDate ?? endDate ?? new Date()
@@ -101,22 +114,36 @@ export const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
   const focusTarget = focusedDate ?? selectedDate ?? endDate ?? new Date();
   const secondMonthDate = addMonths({ date: displayDate, n: 1 });
   const isTwoMonthsVisible = useMedia(`(min-width: ${breakpoints.xs})`);
-  const wasOpenRef = useRef(false);
+  /** Current left-column month; read in the anchor sync effect without listing `displayDate` in deps (month nav would retrigger and snap back). */
+  const startOfLeftVisibleMonthRef = useRef(displayDate);
+  startOfLeftVisibleMonthRef.current = displayDate;
   /** Wraps both month grids so keyboard focus can move between them without treating it as “outside” the calendar. */
   const calendarKeyboardSurfaceRef = useRef<HTMLDivElement>(null);
 
-  // Sync visible month to selection only when the calendar opens, not on every
-  // date click. Otherwise clicking a date in the second month would jump the view.
+  // When the committed anchor changes while the popover is open (typed input, grid, quick action),
+  // move focus to that day. Shift the visible month pair only if the anchor is not already shown
+  // (including the second column in a two-month layout), so picking in the right-hand month does
+  // not jump the view.
   useEffect(() => {
-    const justOpened = isCalendarOpen && !wasOpenRef.current;
-    wasOpenRef.current = isCalendarOpen;
-    if (!justOpened) return;
-    const anchor = selectedDate ?? endDate;
-    if (anchor) {
+    if (!isCalendarOpen) {
+      return;
+    }
+    const anchor = anchorDate;
+    if (!anchor) {
+      return;
+    }
+
+    const alreadyVisible = isDateWithinVisibleMonths({
+      date: anchor,
+      startOfLeftVisibleMonth: startOfLeftVisibleMonthRef.current,
+      showSecondMonth: isTwoMonthsVisible,
+    });
+
+    if (!alreadyVisible) {
       setDisplayDate(getFirstOfMonth(anchor));
-      setFocusedDate(selectedDate ?? endDate ?? new Date());
     }
-  }, [isCalendarOpen, selectedDate, endDate]);
+    setFocusedDate(anchor);
+  }, [isCalendarOpen, anchorDate, isTwoMonthsVisible]);
 
   const onDateSelect = useCallback(
     (date: Date) => {
@@ -235,7 +262,9 @@ export const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
             headingId={headingId}
             hideLastNav
             locale={locale}
-            onDisplayDateChange={setDisplayDate}
+            onDisplayDateChange={() =>
+              setDisplayDate((prev) => addMonths({ date: prev, n: 1 }))
+            }
           />
           <CalendarBody
             calendarKeyboardSurfaceRef={calendarKeyboardSurfaceRef}
@@ -250,7 +279,9 @@ export const DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({
             shouldDisableDate={shouldDisableDate}
             weekStartsOn={weekStartsOn}
             onDateSelect={onDateSelect}
-            onDisplayDateChange={setDisplayDate}
+            onDisplayDateChange={() =>
+              setDisplayDate((prev) => addMonths({ date: prev, n: 1 }))
+            }
             onEscapeKeyPress={closeCalendar}
             onFocusedDateChange={onFocusedDateChange}
           />