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

1 files changed, 31 insertions, 4 deletions

diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js
index 57c935905e5..75c52ce81a7 100644
--- a/addons/web/static/src/js/widgets/date_picker.js
+++ b/addons/web/static/src/js/widgets/date_picker.js
@@ -14,8 +14,10 @@ var DateWidget = Widget.extend({
     events: {
         'change.datetimepicker': 'changeDatetime',
         'change .o_datepicker_input': 'changeDatetime',
+        'click input': '_onInputClicked',
         'input input': '_onInput',
         'keydown': '_onKeydown',
+        'hide.datetimepicker': '_onDateTimePickerHide',
         'show.datetimepicker': '_onDateTimePickerShow',
     },
     /**
@@ -50,10 +52,13 @@ var DateWidget = Widget.extend({
             },
             widgetParent: 'body',
             keyBinds: null,
-            allowInputToggle: true,
         }, options || {});
 
         this.__libInput = 0;
+        // tempusdominus doesn't offer any elegant way to check whether the
+        // datepicker is open or not, so we have to listen to hide/show events
+        // and manually keep track of the 'open' state
+        this.__isOpen = false;
     },
     /**
      * @override
@@ -229,6 +234,12 @@ var DateWidget = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * @private
+     */
+    _onDateTimePickerHide: function () {
+        this.__isOpen = false;
+    },
+    /**
      * Reacts to the datetimepicker being shown
      * Could set/verify our widget value
      * And subsequently update the datetimepicker
@@ -236,6 +247,7 @@ var DateWidget = Widget.extend({
      * @private
      */
     _onDateTimePickerShow: function () {
+        this.__isOpen = true;
         if (this.$input.val().length !== 0 && this.isValid()) {
             this.$input.select();
         }
@@ -246,9 +258,15 @@ var DateWidget = Widget.extend({
      */
     _onKeydown: function (ev) {
         if (ev.which === $.ui.keyCode.ESCAPE) {
-            this.__libInput++;
-            this.$el.datetimepicker('hide');
-            this.__libInput--;
+            if (this.__isOpen) {
+                // we don't want any other effects than closing the datepicker,
+                // like leaving the edition of a row in editable list view
+                ev.stopImmediatePropagation();
+                this.__libInput++;
+                this.$el.datetimepicker('hide');
+                this.__libInput--;
+                this.focus();
+            }
         }
     },
     /**
@@ -264,6 +282,15 @@ var DateWidget = Widget.extend({
             ev.stopImmediatePropagation();
         }
     },
+    /**
+     * @private
+     */
+    _onInputClicked: function () {
+        this.__libInput++;
+        this.$el.datetimepicker('toggle');
+        this.__libInput--;
+        this.focus();
+    },
 });
 
 var DateTimeWidget = DateWidget.extend({