From 85b3d7d257deea5d8d7445395e19efbd5bbad9e8 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 6 Oct 2022 09:34:33 +0000
Subject: [PATCH] [FIX] web: open date(time) picker on label click

This commit fixes the behavior of date, datetime and daterange
fields. It was no longer possible to open the date/datetime picker
by clicking on the corresponding label, since the inputs were
missing the id attribute associated with the label.

Now, it is possible again, and hovering the label will correctly
highlight the input border of the field.

Tests have been added too, to make sure this works properly.

closes odoo/odoo#102742

X-original-commit: 0e35d2b995165cfcb50db7eaec44cce7547eb4e4
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Luca Vitali <luvi@odoo.com>
---
 .../static/src/core/datepicker/datepicker.js  |  2 ++
 .../static/src/core/datepicker/datepicker.xml |  1 +
 .../src/views/fields/date/date_field.xml      |  1 +
 .../fields/daterange/daterange_field.xml      |  2 +-
 .../views/fields/datetime/datetime_field.xml  |  1 +
 .../tests/views/fields/date_field_tests.js    | 21 ++++++++++++++++
 .../views/fields/daterange_field_tests.js     | 24 +++++++++++++++++++
 .../views/fields/datetime_field_tests.js      | 21 ++++++++++++++++
 8 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
index 599558b3e74..6a39dc93f78 100644
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -268,6 +268,7 @@ DatePicker.defaultProps = {
         today: "fa fa-calendar-check-o",
         up: "fa fa-chevron-up",
     },
+    inputId: "",
     maxDate: DateTime.fromObject({ year: 9999, month: 12, day: 31 }),
     minDate: DateTime.fromObject({ year: 1000 }),
     useCurrent: false,
@@ -305,6 +306,7 @@ DatePicker.props = {
         },
         optional: true,
     },
+    inputId: { type: String, optional: true },
     keyBinds: { validate: (kb) => typeof kb === "object" || kb === null, optional: true },
     locale: { type: String, optional: true },
     maxDate: { type: DateTime, optional: true },
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
index 66665ca7c52..31eb05907d9 100644
--- a/addons/web/static/src/core/datepicker/datepicker.xml
+++ b/addons/web/static/src/core/datepicker/datepicker.xml
@@ -7,6 +7,7 @@
             <input type="text"
                 class="o_datepicker_input o_input datetimepicker-input"
                 t-att-name="props.name"
+                t-att-id="props.inputId"
                 t-att-placeholder="props.placeholder"
                 t-attf-data-target="#{ '#' + datePickerId }"
                 t-att-readonly="props.readonly"
diff --git a/addons/web/static/src/views/fields/date/date_field.xml b/addons/web/static/src/views/fields/date/date_field.xml
index 5326d2db462..6d261adc464 100644
--- a/addons/web/static/src/views/fields/date/date_field.xml
+++ b/addons/web/static/src/views/fields/date/date_field.xml
@@ -9,6 +9,7 @@
             <DatePicker
                 t-props="props.pickerOptions"
                 date="date"
+                inputId="props.id"
                 placeholder="props.placeholder"
                 onDateTimeChanged="(date) => this.onDateTimeChanged(date)"
             />
diff --git a/addons/web/static/src/views/fields/daterange/daterange_field.xml b/addons/web/static/src/views/fields/daterange/daterange_field.xml
index 4632b869f16..0380d637b15 100644
--- a/addons/web/static/src/views/fields/daterange/daterange_field.xml
+++ b/addons/web/static/src/views/fields/daterange/daterange_field.xml
@@ -6,7 +6,7 @@
             <t t-esc="formattedValue" />
         </t>
         <t t-else="">
-            <input class="o_input" style="width:100% !important"  t-ref="root" type="text" t-att-value="formattedValue" t-att-placeholder="props.placeholder" t-on-change="onChangeInput" />
+            <input class="o_input" style="width:100% !important"  t-ref="root" type="text" t-att-id="props.id" t-att-value="formattedValue" t-att-placeholder="props.placeholder" t-on-change="onChangeInput" />
         </t>
     </t>
 
diff --git a/addons/web/static/src/views/fields/datetime/datetime_field.xml b/addons/web/static/src/views/fields/datetime/datetime_field.xml
index ea08911fde1..de6b6103ada 100644
--- a/addons/web/static/src/views/fields/datetime/datetime_field.xml
+++ b/addons/web/static/src/views/fields/datetime/datetime_field.xml
@@ -9,6 +9,7 @@
             <DateTimePicker
                 t-props="props.pickerOptions"
                 date="props.value"
+                inputId="props.id"
                 placeholder="props.placeholder"
                 onDateTimeChanged="(datetime) => this.onDateTimeChanged(datetime)"
             />
diff --git a/addons/web/static/tests/views/fields/date_field_tests.js b/addons/web/static/tests/views/fields/date_field_tests.js
index a26b6cc2179..a777c3254ef 100644
--- a/addons/web/static/tests/views/fields/date_field_tests.js
+++ b/addons/web/static/tests/views/fields/date_field_tests.js
@@ -349,6 +349,27 @@ QUnit.module("Fields", (hooks) => {
         );
     });
 
+    QUnit.test("DateField with label opens datepicker on click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="date" string="What date is it" />
+                    <field name="date" />
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+    });
+
     QUnit.test("DateField with warn_future option", async function (assert) {
         await makeView({
             type: "form",
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 3cdf6dc4f3d..fd9bab3ad42 100644
--- a/addons/web/static/tests/views/fields/daterange_field_tests.js
+++ b/addons/web/static/tests/views/fields/daterange_field_tests.js
@@ -381,6 +381,30 @@ QUnit.module("Fields", (hooks) => {
         }
     );
 
+    QUnit.test("DateRangeField with label opens datepicker on click", async function (assert) {
+        serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
+        serverData.models.partner.records[0].date_end = "2017-02-08";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="date" string="Daterange" />
+                    <field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
+                    <field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.isVisible(
+            document.querySelector(".daterangepicker[data-name='date']"),
+            "date range picker should be opened"
+        );
+    });
+
     QUnit.test(
         "Datetime field manually input value should send utc value to server",
         async function (assert) {
diff --git a/addons/web/static/tests/views/fields/datetime_field_tests.js b/addons/web/static/tests/views/fields/datetime_field_tests.js
index 70eb8fd068d..e0a6f1d0718 100644
--- a/addons/web/static/tests/views/fields/datetime_field_tests.js
+++ b/addons/web/static/tests/views/fields/datetime_field_tests.js
@@ -598,4 +598,25 @@ QUnit.module("Fields", (hooks) => {
             assert.strictEqual(target.querySelector(".o_field_widget input").value, "01/08/2022");
         }
     );
+
+    QUnit.test("DateTimeField with label opens datepicker on click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="datetime" string="When is it" />
+                    <field name="datetime" />
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+    });
 });