[FIX] web: do not open datepicker on focus

Before this rev., the datepicker was opened when a date(time) field
was focused (e.g. with keyboard navigation). We don't want this
behavior anymore, and we want the datepicker to open only when the
user clicks in the input. This rev. makes this change.

Moreover, this allowed to refined the keyboard navigation (ESC) in
editable list views: when a datepicker is opened, and the user
presses ESC, we close the datepicker, but we keep the row in
edition, whereas before this rev., the row was switched to readonly.

closes odoo/odoo#32408

Signed-off-by: Martin Geubelle (mge) <mge@openerp.com>

2 files changed, 18 insertions, 15 deletions

diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index c184b0c9382..f0bd135973c 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -2860,10 +2860,7 @@ QUnit.module('basic_fields', {
             View: FormView,
             model: 'partner',
             data: this.data,
-            arch:'<form string="Partners">' +
-                    '<field name="display_name" /> ' + // Do not focus on the date field right away
-                    '<field name="date" />' +
-                '</form>',
+            arch: '<form><field name="date"/></form>',
             res_id: 1,
             viewOptions: {
                 mode: 'edit',
@@ -2879,7 +2876,8 @@ QUnit.module('basic_fields', {
                 done();
             }
         });
-        form.$('.o_input[name="date"]').mouseenter().trigger('focus');
+
+        testUtils.dom.openDatepicker(form.$('.o_datepicker'));
 
         form.destroy();
     });
@@ -2928,13 +2926,13 @@ QUnit.module('basic_fields', {
     QUnit.module('FieldDatetime');
 
     QUnit.test('datetime field in form view', async function (assert) {
-        assert.expect(6);
+        assert.expect(7);
 
         var form = await createView({
             View: FormView,
             model: 'partner',
             data: this.data,
-            arch:'<form string="Partners"><field name="datetime"/></form>',
+            arch: '<form string="Partners"><field name="datetime"/></form>',
             res_id: 1,
             translateParameters: {  // Avoid issues due to localization formats
                 date_format: '%m/%d/%Y',
@@ -2955,8 +2953,14 @@ QUnit.module('basic_fields', {
         await testUtils.form.clickEdit(form);
         assert.strictEqual(form.$('.o_datepicker_input').val(), expectedDateString,
             'the datetime should be correct in edit mode');
+
+        // datepicker should not open on focus
+        assert.containsNone($('body'), '.bootstrap-datetimepicker-widget');
+
+        testUtils.dom.openDatepicker(form.$('.o_datepicker'));
+        assert.containsOnce($('body'), '.bootstrap-datetimepicker-widget');
+
         // select 22 February at 8:23:33
-        assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open');
         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)'));
@@ -3038,7 +3042,7 @@ QUnit.module('basic_fields', {
     });
 
     QUnit.test('datetime field in editable list view', async function (assert) {
-        assert.expect(8);
+        assert.expect(9);
 
         var list = await createView({
             View: ListView,
@@ -3074,8 +3078,11 @@ QUnit.module('basic_fields', {
         assert.strictEqual(list.$('input.o_datepicker_input').val(), expectedDateString,
             'the date should be correct in edit mode');
 
+        assert.containsNone($('body'), '.bootstrap-datetimepicker-widget');
+        testUtils.dom.openDatepicker(list.$('.o_datepicker'));
+        assert.containsOnce($('body'), '.bootstrap-datetimepicker-widget');
+
         // select 22 February at 8:23:33
-        assert.ok($('.bootstrap-datetimepicker-widget').length, 'datepicker should be open');
         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)'));
@@ -3251,6 +3258,7 @@ QUnit.module('basic_fields', {
         });
 
         await testUtils.form.clickCreate(form);
+        testUtils.dom.openDatepicker(form.$('.o_datepicker'));
         $.each($('.day:last-child(),.day:nth-child(2)'), function (index, value) {
             assert.hasClass(value, 'disabled', 'first and last days must be disabled');
         });
diff --git a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
index 0a96e07310e..4eb02b0c380 100644
--- a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
@@ -3428,11 +3428,6 @@ QUnit.module('fields', {}, function () {
             await testUtils.dom.click($('.bootstrap-datetimepicker-widget .year:contains(2017)'));
             await testUtils.dom.click($('.bootstrap-datetimepicker-widget .month').eq(1));
             await testUtils.dom.click($('.day:contains(22)'));
-            // trigger the blur of input before the click on Save, to closely mock what actually
-            // happens when we really click on Save
-            // this is required to close the datepicker before removing the input from the DOM
-            // (because of the re-rendering in readonly), otherwise tempusdominus crashes
-            await testUtils.dom.triggerEvents(form.$('.o_datepicker_input'), 'blur');
             await testUtils.form.clickSave(form);
 
             assert.verifySteps(['read', 'read', 'onchange', 'write', 'read', 'read']);