[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>

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 },

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"

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)"
             />

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>
 

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)"
             />

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",

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) {

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"
+        );
+    });
 });