[FIX] website: disable navbar submenus offset on hover

Steps to reproduce:

- Go to website > Switch the navbar to "Hover" mode (see: `Submenus` >
`On Hover`).
- Create a submenu and drag it under a navbar menu item > The submenu
will always disappear before being reached after the hover.

Since Bootstrap does not provide a built-in way to use the "hover" as a
dropdown trigger, a custom implementation was used to handle the "show
on hover" scenario (see: `hoverableDropdown`). This code also relies on
the submenus being correctly positioned on hover.

Starting from [1], the public `menuDirection` widget was completely
removed (used to align website navbar submenus in an optimal way) and
was replaced by a patch that allows Bootstrap to position dropdowns
dynamically inside a navbar (using Popper).

A side effect of this patch is the use of BS default offset config to
set the positions, leading to a small gap that automatically hides the
submenus when hovered.

The goal of this commit is to prevent this issue by simply forcing
the offset to 0 when the dropdowns are inside a "hover mode" navbar.

[1]: https://github.com/odoo/odoo/commit/8689241f86e2d4ddb4e4510951f92b80e115b914

opw-3766516

closes odoo/odoo#157804

X-original-commit: d52936f7bd396f370a2a09a699ab1e0c655eb020
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>
This commit is contained in:
Mehdi Outagant (MOU)
2024-03-15 17:30:03 +00:00
parent 9d290e2b8c
commit 2f91392c6d
2 changed files with 16 additions and 0 deletions
+1
View File
@@ -131,6 +131,7 @@
'website/static/src/scss/website_controller_page.scss',
'website/static/src/scss/website.ui.scss',
'website/static/src/libs/zoomodoo/zoomodoo.js',
'website/static/src/libs/bootstrap/bootstrap.js',
'website/static/src/js/utils.js',
'web/static/src/core/autocomplete/*',
'website/static/src/components/autocomplete_with_pages/*',
+15
View File
@@ -0,0 +1,15 @@
/**
* Grep `_detectNavbar`: the dynamic navbar's dropdown positioning was activated
* to prevent sub-menus overflow. This positioning will use the default BS
* offsets to position sub-menus leading to a small gap that hides them when
* hovered (on "Hover" mode). The goal here is to prevent this offset when the
* target is inside a navbar.
*/
const bsGetOffsetFunction = Dropdown.prototype._getOffset;
Dropdown.prototype._getOffset = function () {
const offset = bsGetOffsetFunction.apply(this, arguments);
if (this._element.closest(".o_hoverable_dropdown .navbar")) {
return [offset[0], 0];
}
return offset;
};