fix: date picker range

Author: segunadebayo

.changeset/fix-range-picker-end-date-crash.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/date-picker": patch
+---
+
+Fix crash in range date picker when typing end date first by adding `null`/`undefined` checks when accessing date
+properties.

e2e/date-picker.e2e.ts

@@ -217,3 +217,35 @@ test.describe("datepicker [min-max]", () => {
     await I.seeSelectedValue("08/15/2025")
   })
 })
+
+test.describe("datepicker [range]", () => {
+  test.beforeEach(async ({ page }) => {
+    I = new DatePickerModel(page)
+    await I.goto("/date-picker-range")
+  })
+
+  test("should not crash when typing end date first", async () => {
+    // Regression test for issue #2809
+    // Focus the end date input (index 1) first and type a valid date
+    await I.focusInput(1)
+    await I.type("06/15/2024", 1)
+    await I.clickOutsideToBlur()
+
+    // Should not crash and the value should be set
+    await I.seeInputHasValue("06/15/2024", 1)
+  })
+
+  test("should allow selecting dates after typing end date first", async () => {
+    // Type end date first
+    await I.focusInput(1)
+    await I.type("06/20/2024", 1)
+    await I.clickOutsideToBlur()
+    await I.seeInputHasValue("06/20/2024", 1)
+
+    // Open calendar and select a start date - should not crash
+    await I.clickTrigger()
+    await I.seeContent()
+    await I.clickDayCell(10)
+    await I.seeInputHasValue("06/10/2024", 0)
+  })
+})

packages/machines/date-picker/src/date-picker.connect.ts

@@ -148,7 +148,7 @@ export function connect<T extends PropTypes>(
       focused: focusedValue.year === props.value,
       selectable: isOutsideVisibleRange || isOutsideRange,
       outsideRange: isOutsideVisibleRange,
-      selected: !!selectedValue.find((date) => date.year === value),
+      selected: !!selectedValue.find((date) => date && date.year === value),
       valueText: value.toString(),
       inRange:
         isRangePicker &&
@@ -168,7 +168,7 @@ export function connect<T extends PropTypes>(
     const cellState = {
       focused: focusedValue.month === props.value,
       selectable: !isDateOutsideRange(dateValue, min, max),
-      selected: !!selectedValue.find((date) => date.month === value && date.year === focusedValue.year),
+      selected: !!selectedValue.find((date) => date && date.month === value && date.year === focusedValue.year),
       valueText: formatter.format(dateValue.toDate(timeZone)),
       inRange:
         isRangePicker &&
@@ -270,7 +270,7 @@ export function connect<T extends PropTypes>(
     weekDays: getWeekDays(getTodayDate(timeZone), startOfWeek, timeZone, locale),
     visibleRangeText: computed("visibleRangeText"),
     value: selectedValue,
-    valueAsDate: selectedValue.map((date) => date.toDate(timeZone)),
+    valueAsDate: selectedValue.filter((date) => date != null).map((date) => date.toDate(timeZone)),
     valueAsString: computed("valueAsString"),
     focusedValue,
     focusedValueAsDate: focusedValue?.toDate(timeZone),
@@ -870,7 +870,7 @@ export function connect<T extends PropTypes>(
 
     getPresetTriggerProps(props) {
       const value = Array.isArray(props.value) ? props.value : getDateRangePreset(props.value, locale, timeZone)
-      const valueAsString = value.map((item) => item.toDate(timeZone).toDateString())
+      const valueAsString = value.filter((item) => item != null).map((item) => item.toDate(timeZone).toDateString())
       return normalize.button({
         ...parts.presetTrigger.attrs,
         "aria-label": translations.presetTrigger(valueAsString),

packages/machines/date-picker/src/date-picker.utils.ts

@@ -79,7 +79,8 @@ export const defaultTranslations: IntlTranslations = {
     })
   },
   presetTrigger(value) {
-    return Array.isArray(value) ? `select ${value[0].toString()} to ${value[1].toString()}` : `select ${value}`
+    const [start = "", end = ""] = value
+    return `select ${start} to ${end}`
   },
   prevTrigger(view) {
     return match(view, {