[FIX] web: prevent dropdown overflow

With this commit, the dropdown menu tries to stay in the viewport
instead of overflowing. The position compute fn still tries to get the
best position but it applies a maximum height if the popper overflows.

closes odoo#217900

Signed-off-by: Mathieu Duckerts-Antoine (dam) <[email protected]>

Author: mcm-odoo

addons/web/static/src/core/popover/popover.js

@@ -150,6 +150,7 @@ export class Popover extends Component {
                 this.props.onPositioned?.(el, solution);
             },
             position: this.props.position,
+            shrink: true,
         };
     }
 

addons/web/static/src/core/position/utils.js

@@ -13,6 +13,7 @@ import { localization } from "@web/core/l10n/localization";
  * @typedef {{
  *  top: number,
  *  left: number,
+ *  maxHeight?: number;
  *  direction: Direction,
  *  variant: Variant,
  *  variantOffset?: number,
@@ -26,6 +27,8 @@ import { localization } from "@web/core/l10n/localization";
  *  position of the popper relative to the target
  * @property {boolean} [flip=true]
  *  allow the popper to try a flipped direction when it overflows the container
+ * @property {boolean} [shrink=false]
+ *  reduce the popper's height when it overflows the container
  */
 
 /** @type {ComputePositionOptions} */
@@ -96,7 +99,7 @@ export function reverseForRTL(direction, variant = "middle") {
  *                                the containing block of the popper.
  *                                => can be applied to popper.style.(top|left)
  */
-function computePosition(popper, target, { container, flip, margin, position }) {
+function computePosition(popper, target, { container, flip, margin, position, shrink }) {
     // Retrieve directions and variants
     const [direction, variant = "middle"] = reverseForRTL(...position.split("-"));
     const directions = flip ? DIRECTION_FLIP_ORDER[direction] : [direction.at(0)];
@@ -210,6 +213,18 @@ function computePosition(popper, target, { container, flip, margin, position })
         // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
         result.top = positioning.top - popBox.top;
         result.left = positioning.left - popBox.left;
+        if (shrink && malus && v !== "f") {
+            const minTop = Math.floor(!vertical && v === "s" ? targetBox.top : contBox.top);
+            result.top = Math.max(minTop, result.top);
+            const height = {
+                vt: targetBox.top - directionMin,
+                vb: directionMax - targetBox.bottom,
+                hs: variantMax - targetBox.top,
+                hm: variantMax - variantMin,
+                he: targetBox.bottom - variantMin,
+            }[variantPrefix + (vertical ? d : v)];
+            result.maxHeight = Math.floor(height);
+        }
         return { result, malus };
     }
 
@@ -264,9 +279,12 @@ export function reposition(popper, target, options) {
     const solution = computePosition(popper, target, { ...DEFAULTS, ...options });
 
     // Apply it
-    const { top, left, direction, variant } = solution;
+    const { top, left, maxHeight, direction, variant } = solution;
     popper.style.top = `${top}px`;
     popper.style.left = `${left}px`;
+    if (maxHeight) {
+        popper.style.maxHeight = `${maxHeight}px`;
+    }
     if (variant === "fit") {
         const styleProperty = ["top", "bottom"].includes(direction) ? "width" : "height";
         popper.style[styleProperty] = target.getBoundingClientRect()[styleProperty] + "px";

addons/web/static/tests/core/position/position_hook.test.js

@@ -705,6 +705,62 @@ test("not positioned if target not connected", async () => {
     expect.verifySteps([]);
 });
 
+function shrinkPopperTest(position, offset, onPositioned) {
+    return async () => {
+        class TestComp extends Component {
+            static template = xml`
+                <div id="container" t-ref="container" style="background-color: salmon; display: flex; align-items: center; justify-content: center; width: 450px; height: 450px; margin: 25px;">
+                    <div id="target" t-ref="target" style="background-color: royalblue; width: 50px; height: 50px; margin-top: ${offset}px;"/>
+                    <div id="popper" t-ref="popper" style="background-color: maroon; width: 100px; overflow: auto;">
+                        <div id="popper-content" style="background-color: seagreen; height: 500px; width: 50px;"/>
+                    </div>
+                </div>
+            `;
+            static props = ["*"];
+            setup() {
+                const target = useRef("target");
+                const container = useRef("container");
+                usePosition("popper", () => target.el, {
+                    position,
+                    container: () => container.el,
+                    onPositioned(el) {
+                        expect.step("onPositioned");
+                        onPositioned({
+                            c: container.el.getBoundingClientRect(),
+                            p: el.getBoundingClientRect(),
+                            t: target.el.getBoundingClientRect(),
+                        });
+                    },
+                    shrink: true,
+                });
+            }
+        }
+        await mountWithCleanup(TestComp);
+        expect.verifySteps(["onPositioned"]);
+    };
+}
+
+test("max height to prevent container overflow - top", shrinkPopperTest("top", 10, ({ c, p, t }) => {
+    expect(p.top).toBe(c.top);
+    expect(p.bottom).toBe(t.top);
+}));
+test("max height to prevent container overflow - bottom", shrinkPopperTest("bottom", -10, ({ c, p, t }) => {
+    expect(p.top).toBe(t.bottom);
+    expect(p.bottom).toBe(c.bottom);
+}));
+test("max height to prevent container overflow - right-start", shrinkPopperTest("right-start", 0, ({ c, p, t }) => {
+    expect(p.top).toBe(t.top);
+    expect(p.bottom).toBe(c.bottom);
+}));
+test("max height to prevent container overflow - right-middle", shrinkPopperTest("right-middle", 0, ({ c, p }) => {
+    expect(p.top).toBe(c.top);
+    expect(p.bottom).toBe(c.bottom);
+}));
+test("max height to prevent container overflow - right-end", shrinkPopperTest("right-end", 0, ({ c, p, t }) => {
+    expect(p.bottom).toBe(t.bottom);
+    expect(p.top).toBe(c.top);
+}));
+
 function getPositionTest(position, positionToCheck) {
     return async () => {
         expect.assertions(2);