[FIX] web, *: fix keyboard overlay staying active when alt-tab/clicking

*: website

The keyboard navigation mixin was initially only used in the web-client,
because of this, some of the logic for hiding the overlay was put inside
of the web-client. We recently made keyboard navigation available on
website [1]. The handlers that would hide the overlay when alt-tabbing
or clicking on the page were not registered. This commit fixes that by
making the keyboard navigation mixin register the overlay-hiding
handlers itself.

[1]: https://github.com/odoo/odoo/commit/0b0690a3934cedcab0d5e34373e8d40c2ab25660

closes odoo/odoo#50122

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 28 insertions, 3 deletions

diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 9012b7f53fd..56d00d80b9e 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -104,7 +104,11 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
         this.env = env;
         core.bus.on('legacy_webclient_request', this, this._onLegacyWebclientRequest);
     },
+    /**
+     * @override
+     */
     start: function () {
+        KeyboardNavigationMixin.start.call(this);
         var self = this;
 
         // we add the o_touch_device css class to allow CSS to target touch
@@ -161,7 +165,13 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
                 }
             });
     },
-
+    /**
+     * @override
+     */
+    destroy: function () {
+        KeyboardNavigationMixin.destroy.call(this);
+        return this._super(...arguments);
+    },
     bind_events: function () {
         var self = this;
         $('.oe_systray').show();
@@ -190,14 +200,12 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
                 }
             }, 0);
         });
-        window.addEventListener('blur', function (e) {self._hideAccessKeyOverlay(); });
         core.bus.on('click', this, function (ev) {
             $('.tooltip').remove();
             if (!$(ev.target).is('input[type=file]')) {
                 $(this.el.getElementsByClassName('oe_dropdown_menu oe_opened')).removeClass('oe_opened');
                 $(this.el.getElementsByClassName('oe_dropdown_toggle oe_opened')).removeClass('oe_opened');
             }
-            this._hideAccessKeyOverlay();
         });
         core.bus.on('connection_lost', this, this._onConnectionLost);
         core.bus.on('connection_restored', this, this._onConnectionRestored);
diff --git a/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js b/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
index 707dab1f8f9..c67cb98b15d 100644
--- a/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
+++ b/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
@@ -1,6 +1,7 @@
 odoo.define('web.KeyboardNavigationMixin', function (require) {
     "use strict";
     var BrowserDetection = require('web.BrowserDetection');
+    const core = require('web.core');
 
     /**
      * list of the key that should not be used as accesskeys. Either because we want to reserve them for a specific behavior in Odoo or
@@ -44,6 +45,22 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
             this._areAccessKeyVisible = false;
             this.BrowserDetection = new BrowserDetection();
         },
+        /**
+         * @override
+         */
+        start: function () {
+            const temp = this._hideAccessKeyOverlay.bind(this);
+            this._hideAccessKeyOverlay = () => temp();
+            window.addEventListener('blur', this._hideAccessKeyOverlay);
+            core.bus.on('click', null, this._hideAccessKeyOverlay);
+        },
+        /**
+         * @destructor
+         */
+        destroy: function () {
+            window.removeEventListener('blur', this._hideAccessKeyOverlay);
+            core.bus.off('click', null, this._hideAccessKeyOverlay);
+        },
 
         //--------------------------------------------------------------------------
         // Private