fix(date-picker): ensure proximitySelectionDisabled resets range on…

… post-range-commit selection (#9171) **Related Issue:** #6223 ## Summary Updates date-picker's `proximitySelectionDisabled` behavior to properly reset a range once a selection occurs after a range's start and end date have been committed.
Esri · Apr 23, 2024 · f466b14 · f466b14
1 parent 9be331d
commit f466b14
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
@@ -526,4 +526,26 @@ describe("calcite-date-picker", () => {
       expect(await datePicker.getProperty("value")).toEqual(["2023-12-08", "2024-02-08"]);
     });
   });
+
+  it("restarts range on selection after a range is complete when proximitySelectionDisabled is set", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html` <calcite-date-picker range value="2020-09-01" proximity-selection-disabled></calcite-date-picker>`,
+    );
+    const datePicker = await page.find("calcite-date-picker");
+
+    await selectDay("20200908", page, "mouse");
+    await page.waitForChanges();
+    await selectDay("20200923", page, "mouse");
+    await page.waitForChanges();
+    expect(await datePicker.getProperty("value")).toEqual(["2020-09-08", "2020-09-23"]);
+
+    await selectDay("20200915", page, "mouse");
+    await page.waitForChanges();
+    expect(await datePicker.getProperty("value")).toEqual(["2020-09-15", ""]);
+
+    await selectDay("20200930", page, "mouse");
+    await page.waitForChanges();
+    expect(await datePicker.getProperty("value")).toEqual(["2020-09-15", "2020-09-30"]);
+  });
 });
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -409,7 +409,21 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
       start,
       end,
     };
-    if (!this.proximitySelectionDisabled) {
+
+    if (this.proximitySelectionDisabled) {
+      if ((end && start) || (!end && date >= start)) {
+        this.hoverRange.focused = "end";
+        this.hoverRange.end = date;
+      } else if (!end && date < start) {
+        this.hoverRange = {
+          focused: "start",
+          start: date,
+          end: start,
+        };
+      } else {
+        this.hoverRange = undefined;
+      }
+    } else {
       if (start && end) {
         const startDiff = getDaysDiff(date, start);
         const endDiff = getDaysDiff(date, end);
@@ -440,21 +454,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
           }
         }
       }
-    } else {
-      if (!end) {
-        if (date < start) {
-          this.hoverRange = {
-            focused: "start",
-            start: date,
-            end: start,
-          };
-        } else {
-          this.hoverRange.end = date;
-          this.hoverRange.focused = "end";
-        }
-      } else {
-        this.hoverRange = undefined;
-      }
     }
     event.stopPropagation();
   };
@@ -594,7 +593,10 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     } else if (!end) {
       this.setEndDate(date);
     } else {
-      if (!this.proximitySelectionDisabled) {
+      if (this.proximitySelectionDisabled) {
+        this.setStartDate(date);
+        this.setEndDate(null);
+      } else {
         if (this.activeRange) {
           if (this.activeRange == "end") {
             this.setEndDate(date);
@@ -614,8 +616,6 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
             this.setEndDate(date);
           }
         }
-      } else {
-        this.setStartDate(date);
       }
     }
     this.calciteDatePickerChange.emit();