[FIX] website: show the correct value for hoverable dropdown option

Before this commit, the hoverable dropdown option was broken because
we changed the option selector to the navbar element instead of the
header element. But we forgot to care about the data-select-class
which adds a class on the header. This commit fixes the issues by
changing the $target back to the header element for the related option
as the fact it is linked to the navbar element is only so that the
options appear in a different section, on navbar click.

Part of https://github.com/odoo/odoo/pull/59842
task-2312878

closes odoo/odoo#59842

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 13 insertions, 0 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5a46dab1046..e0b003c3ca0 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1716,6 +1716,19 @@ options.registry.collapse = options.Class.extend({
 });
 
 options.registry.HeaderNavbar = options.Class.extend({
+    /**
+     * Particular case: we want the option to be associated on the header navbar
+     * in XML so that the related options only appear on navbar click (not
+     * header), in a different section, etc... but we still want the target to
+     * be the header itself.
+     *
+     * @constructor
+     */
+    init() {
+        this._super(...arguments);
+        // Don't use setTarget, we want it to be set directly at initialization.
+        this.$target = this.$target.closest('#wrapwrap > header');
+    },
 
     //--------------------------------------------------------------------------
     // Private