From 6d3bfbe47c8487184ea90668456f8e516c4cf1ed Mon Sep 17 00:00:00 2001
From: fdardenne <dafl@odoo.com>
Date: Fri, 17 Mar 2023 11:00:27 +0000
Subject: [PATCH] [FIX] web: daterangepicker: fix the end date when keyup

This commit deactivates the daterangepicker from reacting to the
`input` keyup events.

The handler for input keyup must only be the parent because
daterangepicker does not have access to both the start and end date
inputs.
As a consequence of not having access to both inputs, the
daterangepicker always sets the end date to the start date when a date
input is modified.

**Steps to reproduce:**

- Go to the event app and open a record
- Click on an input of the date range picker, and the picker opens
- Move the cursor in the input with the keyboard (right or left arrow)
- The picker loses the range

**Current behavior:**
The picker sets the end date to the start date whenever there is an
onKeyup event on the input.

**Expected behavior:**
The picker should not reset the end date when there is an onKeyup
event on the input.

closes odoo/odoo#115834

Ticket-id: 3198864
X-original-commit: 2a1857db4bee43ff266b4be279791c9b5c957085
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../lib/daterangepicker/daterangepicker.js    |  7 ++-
 .../views/fields/daterange_field_tests.js     | 59 +++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/lib/daterangepicker/daterangepicker.js b/addons/web/static/lib/daterangepicker/daterangepicker.js
index 034692e4284..a0fd9672594 100644
--- a/addons/web/static/lib/daterangepicker/daterangepicker.js
+++ b/addons/web/static/lib/daterangepicker/daterangepicker.js
@@ -431,8 +431,11 @@
                 'click.daterangepicker': $.proxy(this.show, this),
                 // odoo cutomization, to align behavior of the daterange widget with the date picker one
                 // 'focus.daterangepicker': $.proxy(this.show, this),
-                'keyup.daterangepicker': $.proxy(this.elementChanged, this),
-                'keydown.daterangepicker': $.proxy(this.keydown, this) //IE 11 compatibility
+                // odoo customization, we don't want this function to execute his normal behaviour
+                // as daterangepicker does not know which input has been modified (start, end) and it
+                // does not have reference to the other input.
+                // 'keyup.daterangepicker': $.proxy(this.elementChanged, this),
+                'keydown.daterangepicker': $.proxy(this.keydown, this)
             });
         } else {
             this.element.on('click.daterangepicker', $.proxy(this.toggle, this));
diff --git a/addons/web/static/tests/views/fields/daterange_field_tests.js b/addons/web/static/tests/views/fields/daterange_field_tests.js
index 48cb94e7a3b..04715c05e69 100644
--- a/addons/web/static/tests/views/fields/daterange_field_tests.js
+++ b/addons/web/static/tests/views/fields/daterange_field_tests.js
@@ -466,6 +466,65 @@ QUnit.module("Fields", (hooks) => {
         }
     );
 
+    QUnit.test(
+        "Daterange field keyup should not erase end date [REQUIRE FOCUS]",
+        async function (assert) {
+            serverData.models.partner.fields.datetime_end = {
+                string: "Datetime End",
+                type: "datetime",
+            };
+            serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
+                        <field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            // check date display correctly in readonly
+            assert.strictEqual(
+                target.querySelector(".o_field_daterange input").value,
+                "02/08/2017 15:30:00",
+                "the start date should be correctly displayed"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_field_daterange input")[1].value,
+                "03/13/2017 05:30:00",
+                "the end date should be correctly displayed"
+            );
+
+            // reveal the daterangepicker
+            await click(target.querySelector(".o_field_daterange[name='datetime'] input"));
+
+            // the keyup event should not be handled by daterangepicker
+            await triggerEvent(target, ".o_field_daterange[name='datetime'] input", "keyup", {
+                key: "ArrowLeft",
+            });
+
+            const datepickers = document.querySelectorAll(`.daterangepicker`);
+            // TODO: check if the range is correctly displayed in the picker
+            await click(datepickers[1].querySelector(".applyBtn"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_daterange input").value,
+                "02/08/2017 15:30:00",
+                "the start date should be correctly displayed after onkeyup"
+            );
+
+            assert.strictEqual(
+                target.querySelectorAll(".o_field_daterange input")[1].value,
+                "03/13/2017 05:30:00",
+                "the end date should be correctly displayed after onkeyup"
+            );
+        }
+    );
+
     QUnit.test(
         "DateRangeField manually input wrong value should show toaster",
         async function (assert) {