[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:
@@ -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/*',
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
Reference in New Issue
Block a user