From 3eebf5e3840932792169fa3068478fb79c13dd39 Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Thu, 20 Oct 2022 13:06:23 +0000 Subject: [PATCH] [FIX] web: properly handle RTL direction for autoMoreMenu Issue: 1. Install eCommerce + set up "Contact" header (there are probably other configurations where this bug occurs but this one fails for sure). 2. Go to website in english version (with few menu items on header) 3. Switch language to Arabic => The "+" dropdown appears on the header even when there is enough space for other menu items. Explanation: The 'AutoMoreMenu' option is used on website menu to auto adapt the header layout so that elements are not wrapped on a new line (and sets a "+" dropdown that contains the overflowing menu items). When the language is switched to Arabic (or any RTL language), the current code ('computeFloatOuterWidthWithMargins()' method) won't be able to compute the reversed margins correctly for "unfoldable" items: For example, if we want to compute the width (including margins) of the "user dropdown": ============================================ IW -> Initial width value (without margins) LR -> Left margin computing RM -> Right margin computing ============================================ A- On English version (LTR): 1- LM: item has left auto margin class -> left margin won't be added. 2- RM: item has no right auto margin class -> right margin added (=== 0) 3- The final width is the same as the initial value (IW). B- On Arabic version (RTL): 1- LM: item has left auto margin class -> left margin won't be added. 2- RM: item has no right auto margin class -> right margin added (> 0). The right margin value added here is just the left auto margin reversed because of direction. The code will return a final width > IW and since the item is "unfoldable", its width will reduce the available space for foldable items. Solution: The goal of this commit is to make the code smart enough to avoid adding wrong right/left margin value caused by left/right auto margin class on 'RTL' direction. opw-2963123 closes odoo/odoo#107573 X-original-commit: 8a4a59389338ad1f50c08df3d55c267ca4d830da Signed-off-by: Quentin Smetz (qsm) --- addons/web/static/src/legacy/js/core/menu.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/addons/web/static/src/legacy/js/core/menu.js b/addons/web/static/src/legacy/js/core/menu.js index 0e37072c9a4..8dde15aec47 100644 --- a/addons/web/static/src/legacy/js/core/menu.js +++ b/addons/web/static/src/legacy/js/core/menu.js @@ -158,10 +158,11 @@ export async function initAutoMoreMenu(el, options) { var rect = el.getBoundingClientRect(); var style = window.getComputedStyle(el); var outerWidth = rect.right - rect.left; - if (mLeft !== false && (considerAutoMargins || !autoMarginLeftRegex.test(el.getAttribute('class')))) { + const isRTL = style.direction === 'rtl'; + if (mLeft !== false && (considerAutoMargins || !(isRTL ? autoMarginRightRegex : autoMarginLeftRegex).test(el.getAttribute('class')))) { outerWidth += parseFloat(style.marginLeft); } - if (mRight !== false && (considerAutoMargins || !autoMarginRightRegex.test(el.getAttribute('class')))) { + if (mRight !== false && (considerAutoMargins || !(isRTL ? autoMarginLeftRegex : autoMarginRightRegex).test(el.getAttribute('class')))) { outerWidth += parseFloat(style.marginRight); } // Would be NaN for invisible elements for example