[FIX] web: date(time) fields: trigger fieldChanged once

Before this rev., the 'fieldChanged' event was triggered each time
the user selected a value (a day, an hour, a minute or a second) in
the datepicker. This means that if there was an onchange on the
field, a lot of RPCs could have been done when a user set a
datetime. In addition, in a list view with multi edition, the user
was asked to save the changes at each step of the datetime
selection, making the feature unusable.

Task 2068280

3 files changed, 59 insertions, 1 deletions

diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js
index ac8e83c8e30..3f528fe7c37 100644
--- a/addons/web/static/src/js/widgets/date_picker.js
+++ b/addons/web/static/src/js/widgets/date_picker.js
@@ -12,7 +12,6 @@ var DateWidget = Widget.extend({
     template: "web.datepicker",
     type_of_date: "date",
     events: {
-        'change.datetimepicker': 'changeDatetime',
         'error.datetimepicker': 'errorDatetime',
         'change .o_datepicker_input': 'changeDatetime',
         'click input': '_onInputClicked',
@@ -257,6 +256,7 @@ var DateWidget = Widget.extend({
         if (this._onScroll) {
             window.removeEventListener('scroll', this._onScroll, true);
         }
+        this.changeDatetime();
     },
     /**
      * Reacts to the datetimepicker being shown
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index eca412c036a..e99fd7481df 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -3361,6 +3361,63 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('datetime fields do not trigger fieldChange before datetime completly picked', async function (assert) {
+        assert.expect(6);
+
+        this.data.partner.onchanges = {
+            datetime: function () {},
+        };
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form><field name="datetime"/></form>',
+            res_id: 1,
+            translateParameters: { // Avoid issues due to localization formats
+                date_format: '%m/%d/%Y',
+                time_format: '%H:%M:%S',
+            },
+            session: {
+                getTZOffset: function () {
+                    return 120;
+                },
+            },
+            mockRPC: function (route, args) {
+                if (args.method === 'onchange') {
+                    assert.step('onchange');
+                }
+                return this._super.apply(this, arguments);
+            },
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+
+        testUtils.dom.openDatepicker(form.$('.o_datepicker'));
+        assert.containsOnce($('body'), '.bootstrap-datetimepicker-widget');
+
+        // select a date and time
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .picker-switch').first());
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .picker-switch:eq(1)'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .year:contains(2017)'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .month').eq(3));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .day:contains(22)'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .fa-clock-o'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .timepicker-hour'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .hour:contains(08)'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .timepicker-minute'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .minute:contains(25)'));
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .timepicker-second'));
+        assert.verifySteps([], "should not have done any onchange yet");
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget .second:contains(35)'));
+
+        assert.containsNone($('body'), '.bootstrap-datetimepicker-widget');
+        assert.strictEqual(form.$('.o_datepicker_input').val(), "04/22/2017 08:25:35");
+        assert.verifySteps(['onchange'], "should have done only one onchange");
+
+        form.destroy();
+    });
 
     QUnit.test('datetime field not visible in form view should not capture the focus on keyboard navigation', async function (assert) {
         assert.expect(1);
diff --git a/addons/web/static/tests/widgets/domain_selector_tests.js b/addons/web/static/tests/widgets/domain_selector_tests.js
index 305315b72c6..8c246fd8399 100644
--- a/addons/web/static/tests/widgets/domain_selector_tests.js
+++ b/addons/web/static/tests/widgets/domain_selector_tests.js
@@ -174,6 +174,7 @@ QUnit.module('DomainSelector', {
         await testUtils.dom.clickFirst($('.bootstrap-datetimepicker-widget :not(.today)[data-action="selectDay"]'));
         assert.notEqual(domainSelector.$(".o_datepicker:visible input").val(), val,
             "datepicker value should have changed");
+        await testUtils.dom.click($('.bootstrap-datetimepicker-widget a[data-action=close]'));
 
         domainSelector.destroy();
     });