From 5208c68f0c6a7d33021e6e45820ab773cd0341fa Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Thu, 23 Sep 2021 13:14:00 +0000
Subject: [PATCH] [FIX] web: dropdown: avoid positioning in mobile

Before this commit, the positioning of the dropdown (which is powered as a poppover)
was executed all the time.

This commit prevents this behavior in mobile, assuming there is not enough space anyway
to have a proper fixed position and that we should use scrolling instead.

closes odoo/odoo#77206

X-original-commit: 1271ef80fafa4438271af0919dcca229aa20bf81
Related: odoo/enterprise#21191
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../web/static/src/core/dropdown/dropdown.js  | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index afbea6ce8d2..b32c941b013 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -66,24 +66,6 @@ export class Dropdown extends Component {
         // Set up key navigation -----------------------------------------------
         useDropdownNavigation();
 
-        // Set up toggler and positioning --------------------------------------
-        /** @type {string} **/
-        let position =
-            this.props.position || (this.hasParentDropdown ? "right-start" : "bottom-start");
-        if (localization.direction === "rtl") {
-            let [direction, variant = "middle"] = position.split("-");
-            if (["bottom", "top"].includes(direction)) {
-                variant = variant === "start" ? "end" : "start";
-            } else {
-                direction = direction === "left" ? "right" : "left";
-            }
-            position = [direction, variant].join("-");
-        }
-        const positioningOptions = {
-            popper: "menuRef",
-            position,
-            directionFlipOrder: { right: "rl", bottom: "bt", top: "tb", left: "lr" },
-        };
         if (this.props.toggler === "parent") {
             // Add parent click listener to handle toggling
             useEffect(
@@ -102,13 +84,37 @@ export class Dropdown extends Component {
                 },
                 () => []
             );
+        }
+
+        // Setup positioning only when in desktop
+        if (!this.env.isSmall) {
+            /** @type {string} **/
+            let position =
+                this.props.position || (this.hasParentDropdown ? "right-start" : "bottom-start");
+            if (localization.direction === "rtl") {
+                let [direction, variant = "middle"] = position.split("-");
+                if (["bottom", "top"].includes(direction)) {
+                    variant = variant === "start" ? "end" : "start";
+                } else {
+                    direction = direction === "left" ? "right" : "left";
+                }
+                position = [direction, variant].join("-");
+            }
+
+            const positioningOptions = {
+                popper: "menuRef",
+                position,
+                directionFlipOrder: { right: "rl", bottom: "bt", top: "tb", left: "lr" },
+            };
 
             // Position menu relatively to parent element
-            usePosition(() => this.el.parentElement, positioningOptions);
-        } else {
-            // Position menu relatively to inner toggler
-            const togglerRef = useRef("togglerRef");
-            usePosition(() => togglerRef.el, positioningOptions);
+            if (this.props.toggler === "parent") {
+                usePosition(() => this.el.parentElement, positioningOptions);
+            } else {
+                // Position menu relatively to inner toggler
+                const togglerRef = useRef("togglerRef");
+                usePosition(() => togglerRef.el, positioningOptions);
+            }
         }
     }