From 1a03b49700b22e0e6b520c276f979808aac552ae Mon Sep 17 00:00:00 2001
From: Samuel Schultze <samuelschultze@gmail.com>
Date: Thu, 4 Apr 2024 07:59:54 -0300
Subject: [PATCH] Fix calendar range selection (#20394)

fix: calendar range selector
---
 src/components/date-range-picker.ts | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index 5ebb0c2a97..523ac64eb0 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -11,10 +11,10 @@ import {
 } from "../common/datetime/localize_date";
 import { mainWindow } from "../common/dom/get_main_window";
 
-// Set the current date to the left picker instead of the right picker because the right is hidden
 const CustomDateRangePicker = Vue.extend({
   mixins: [DateRangePicker],
   methods: {
+    // Set the current date to the left picker instead of the right picker because the right is hidden
     selectMonthDate() {
       const dt: Date = this.end || new Date();
       // @ts-ignore
@@ -23,6 +23,33 @@ const CustomDateRangePicker = Vue.extend({
         month: dt.getMonth() + 1,
       });
     },
+    // Fix the start/end date calculation when selecting a date range. The
+    // original code keeps track of the first clicked date (in_selection) but it
+    // never sets it to either the start or end date variables, so if the
+    // in_selection date is between the start and end date that were set by the
+    // hover the selection will enter a broken state that's counter-intuitive
+    // when hovering between weeks and leads to a random date when selecting a
+    // range across months. This bug doesn't seem to be present on v0.6.7 of the
+    // lib
+    hoverDate(value: Date) {
+      if (this.readonly) return;
+
+      if (this.in_selection) {
+        const pickA = this.in_selection as Date;
+        const pickB = value;
+
+        this.start = this.normalizeDatetime(
+          Math.min(pickA.valueOf(), pickB.valueOf()),
+          this.start
+        );
+        this.end = this.normalizeDatetime(
+          Math.max(pickA.valueOf(), pickB.valueOf()),
+          this.end
+        );
+      }
+
+      this.$emit("hover-date", value);
+    },
   },
 });