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

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

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

addons/web/static/tests/chrome/keyboard_navigation_mixin_tests.js

@@ -15,11 +15,16 @@ QUnit.module('KeyboardNavigationMixin', function () {
                 KeyboardNavigationMixin.init.call(this);
             },
             start: function () {
+                KeyboardNavigationMixin.start.call(this);
                 var $button = $('<button>').text('Click Me!').attr('accesskey', 'o');
                 // we need to define the accesskey because it will not be assigned on invisible buttons
                 this.$el.append($button);
                 return this._super.apply(this, arguments);
             },
+            destroy: function () {
+                KeyboardNavigationMixin.destroy.call(this);
+                return this._super(...arguments);
+            },
         });
         var parent = testUtils.createParent({});
         var w = new KeyboardWidget(parent);
@@ -51,11 +56,16 @@ QUnit.module('KeyboardNavigationMixin', function () {
                 KeyboardNavigationMixin.init.call(this);
             },
             start: function () {
+                KeyboardNavigationMixin.start.call(this);
                 $button = $('<button>').text('Click Me!').attr('accesskey', 'o');
                 // we need to define the accesskey because it will not be assigned on invisible buttons
                 this.$el.append($button);
                 return this._super.apply(this, arguments);
             },
+            destroy: function () {
+                KeyboardNavigationMixin.destroy.call(this);
+                return this._super(...arguments);
+            },
         });
         var parent = testUtils.createParent({});
         var w = new KeyboardWidget(parent);

addons/website/static/src/js/content/website_root.js

@@ -38,6 +38,7 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
      * @override
      */
     start: function () {
+        KeyboardNavigationMixin.start.call(this);
         // Compatibility lang change ?
         if (!this.$('.js_change_lang').length) {
             var $links = this.$('ul.js_language_selector li a:not([data-oe-id])');
@@ -57,6 +58,13 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
 
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy() {
+        KeyboardNavigationMixin.destroy.call(this);
+        return this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Private