fix(date-picker): match keyboard range selection to pointer behavior (#3205)

Author: segunadebayo

.changeset/date-picker-range-keyboard.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/date-picker": patch
+---
+
+Fix keyboard range selection to match the pointer behavior.

.changeset/date-picker-resume-range.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/date-picker": patch
+---
+
+Resume range selection when reopening the calendar with an incomplete range.

e2e/date-picker.e2e.ts

@@ -307,6 +307,62 @@ test.describe("datepicker [range]", () => {
     await I.seeInputHasValue("06/10/2024", 0)
     await I.seeInputHasValue("06/20/2024", 1)
   })
+
+  test("Enter on a completed range starts a new range instead of keeping the old end", async () => {
+    // create initial range
+    await I.focusInput(0)
+    await I.type("06/10/2024", 0)
+    await I.clickOutsideToBlur()
+    await I.focusInput(1)
+    await I.type("06/20/2024", 1)
+    await I.clickOutsideToBlur()
+    await I.seeInputHasValue("06/10/2024", 0)
+    await I.seeInputHasValue("06/20/2024", 1)
+
+    // reopen and pick a new date with the keyboard
+    await I.clickTrigger()
+    await I.seeContent()
+    await I.seeDayCellIsFocused("2024-06-10")
+    await I.pressKey("ArrowRight")
+    await I.seeDayCellIsFocused("2024-06-11")
+    await I.pressKey("Enter")
+
+    // should reset to a single new start, stay open and move to the next day
+    await I.seeInputHasValue("06/11/2024", 0)
+    await I.seeInputHasValue("", 1)
+    await I.seeContent()
+    await I.seeDayCellIsFocused("2024-06-12")
+  })
+
+  test("selecting a range start with Enter previews the range band", async () => {
+    await I.clickTrigger()
+    await I.seeContent()
+    await I.seeTodayCellIsFocused()
+    await I.pressKey("Enter")
+    // the start is selected and the band previews to the next focused day, without moving first
+    await expect(I.todayCell).toHaveAttribute("data-range-start", "")
+    await expect(I.getNextDayCell()).toHaveAttribute("data-in-hover-range", "")
+  })
+
+  test("reopening with only a start date resumes range selection", async () => {
+    const start = I.getDate({ day: 10 })
+    const end = I.getDate({ day: 20 })
+
+    // commit only a start date, then click outside
+    await I.clickTrigger()
+    await I.seeContent()
+    await I.clickDayCell(10)
+    await I.clickOutsideToBlur()
+    await I.seeInputHasValue(start.formatted, 0)
+    await I.seeInputHasValue("", 1)
+
+    // reopening and picking another date should complete the range
+    await I.clickTrigger()
+    await I.seeContent()
+    await I.clickDayCell(20)
+    await I.seeInputHasValue(start.formatted, 0)
+    await I.seeInputHasValue(end.formatted, 1)
+  })
 })
 
 test.describe("datepicker [locale numerals]", () => {

e2e/models/datepicker.model.ts

@@ -253,4 +253,12 @@ export class DatePickerModel extends Model {
   seeFocusedValue(value: string) {
     return expect(this.page.locator(".date-output")).toContainText(`Focused: ${value}`)
   }
+
+  getDayCellByValue(value: string) {
+    return this.page.locator(`${part("table-cell-trigger")}[data-view=day][data-value="${value}"]`)
+  }
+
+  seeDayCellIsFocused(value: string) {
+    return expect(this.getDayCellByValue(value)).toBeFocused()
+  }
 }

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

@@ -419,6 +419,7 @@ export const machine = createMachine<DatePickerSchema>({
 
     open: {
       tags: ["open"],
+      entry: ["resumeRangeSelection"],
       effects: ["trackDismissableElement", "trackPositioning"],
       exit: ["clearHoveredDate"],
       on: {
@@ -539,7 +540,7 @@ export const machine = createMachine<DatePickerSchema>({
           },
           {
             guard: and("isRangePicker", "hasSelectedRange"),
-            actions: ["setActiveIndexToStart", "clearDateValue", "setSelectedDate", "setActiveIndexToEnd"],
+            actions: ["setActiveIndexToStart", "resetSelection", "setActiveIndexToEnd", "focusNextDay"],
           },
           // === Grouped transitions (based on `closeOnSelect` and `isOpenControlled`) ===
           {
@@ -1094,6 +1095,11 @@ export const machine = createMachine<DatePickerSchema>({
       setActiveIndexToStart({ context }) {
         context.set("activeIndex", 0)
       },
+      resumeRangeSelection({ context, prop }) {
+        if (prop("selectionMode") === "range" && context.get("value").length === 1) {
+          context.set("activeIndex", 1)
+        }
+      },
       focusActiveCell({ scope, context, event }) {
         if (event.src === "input.click") return
         raf(() => {
@@ -1109,12 +1115,10 @@ export const machine = createMachine<DatePickerSchema>({
         })
       },
       setHoveredValueIfKeyboard({ context, event, prop }) {
-        if (
-          !event.type.startsWith("TABLE.ARROW") ||
-          prop("selectionMode") !== "range" ||
-          context.get("activeIndex") === 0
-        )
-          return
+        const isKeyboardNavigation =
+          event.type.startsWith("TABLE.ARROW") ||
+          ["TABLE.ENTER", "TABLE.HOME", "TABLE.END", "TABLE.PAGE_UP", "TABLE.PAGE_DOWN"].includes(event.type)
+        if (!isKeyboardNavigation || prop("selectionMode") !== "range" || context.get("activeIndex") === 0) return
         context.set("hoveredValue", context.get("focusedValue").copy())
       },
       focusTriggerElement({ scope }) {