From 2f91392c6dc1c81df8f97c4d46ee08a2c92f4b76 Mon Sep 17 00:00:00 2001
From: "Mehdi Outagant (MOU)" <mou@odoo.com>
Date: Fri, 15 Mar 2024 15:45:14 +0100
Subject: [PATCH] [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>
---
 addons/website/__manifest__.py                    |  1 +
 .../static/src/libs/bootstrap/bootstrap.js        | 15 +++++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 addons/website/static/src/libs/bootstrap/bootstrap.js

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 037598a5ac8..e815f74b3da 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -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/*',
diff --git a/addons/website/static/src/libs/bootstrap/bootstrap.js b/addons/website/static/src/libs/bootstrap/bootstrap.js
new file mode 100644
index 00000000000..7be751cd84f
--- /dev/null
+++ b/addons/website/static/src/libs/bootstrap/bootstrap.js
@@ -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;
+};