[FIX] web: keyboard overlay with position `absolute`

Before this commit, when an element with access key has a CSS
position absolute , pressing the key 'ALT' to show the access
key overlay may break the position of the element.

This is due to altering the CSS position of the element which the
overlay is attached to: it becomes `relative`, so that the overlay
takes the whole size of the attached element.

In case of an absolute element, it should not become relative,
otherwise its position on the document may be completely different.
Since the overlay has position `absolute`, if its parent has also
position `absolute`, then keeping both with position `absolute` will
let the overlay take the size of the parent, without changing the
position of the parent.

Task-ID 1885445

1 files changed, 12 insertions, 4 deletions

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 dc65d2ea610..4913d5a6a80 100644
--- a/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
+++ b/addons/web/static/src/js/chrome/keyboard_navigation_mixin.js
@@ -45,13 +45,21 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
             var accesskeyElements = $(document).find('[accesskey]').filter(':visible');
             _.each(accesskeyElements, function (elem) {
                 var overlay = $(_.str.sprintf("<div class='o_web_accesskey_overlay'>%s</div>", $(elem).attr('accesskey').toUpperCase()));
+
+                var $overlayParent;
                 if (elem.tagName.toUpperCase() === "INPUT") {
-                    // special case for the search input that has an access key defined. We cannot set the overlay on the input itself, only on its parent
-                    overlay.appendTo($(elem).parent().css('position', 'relative'));
+                    // special case for the search input that has an access key
+                    // defined. We cannot set the overlay on the input itself,
+                    // only on its parent.
+                    $overlayParent = $(elem).parent();
+                } else {
+                    $overlayParent = $(elem);
                 }
-                else {
-                    overlay.appendTo($(elem).css('position', 'relative'));
+
+                if ($overlayParent.css('position') !== 'absolute') {
+                    $overlayParent.css('position', 'relative');
                 }
+                overlay.appendTo($overlayParent);
             });
         },
         /**