[REV] web: reintroduce mobile dropdown positioning

Revert "[FIX] web: dropdown: avoid positioning in mobile"
This reverts commit 1271ef80fafa4438271af0919dcca229aa20bf81.

Revert Reason:
A better alternative fix to the original
issue has been found. See preceding commit.

X-original-commit: 384169fb1b5874fd670f07fb2a6b1aca449f56c9
Part-of: odoo/odoo#78261
This commit is contained in:
Bruno Boi
2021-10-13 06:03:57 +00:00
parent 97f90b03cf
commit 9c0d5228d4
+23 -29
View File
@@ -73,6 +73,24 @@ export class Dropdown extends Component {
useDropdownNavigation();
// Set up toggler and positioning --------------------------------------
/** @type {string} **/
let position =
this.props.position || (this.hasParentDropdown ? "right-start" : "bottom-start");
let [direction, variant = "middle"] = position.split("-");
if (localization.direction === "rtl") {
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" },
};
this.directionCaretClass = DIRECTION_CARET_CLASS[direction];
this.togglerRef = useRef("togglerRef");
if (this.props.toggler === "parent") {
// Add parent click listener to handle toggling
@@ -92,37 +110,13 @@ 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");
let [direction, variant = "middle"] = position.split("-");
if (localization.direction === "rtl") {
if (["bottom", "top"].includes(direction)) {
variant = variant === "start" ? "end" : "start";
} else {
direction = direction === "left" ? "right" : "left";
}
position = [direction, variant].join("-");
}
this.directionCaretClass = DIRECTION_CARET_CLASS[direction];
const positioningOptions = {
popper: "menuRef",
position,
directionFlipOrder: { right: "rl", bottom: "bt", top: "tb", left: "lr" },
};
// Position menu relatively to parent element
if (this.props.toggler === "parent") {
usePosition(() => this.el.parentElement, positioningOptions);
} else {
// Position menu relatively to inner toggler
usePosition(() => this.togglerRef.el, positioningOptions);
}
usePosition(() => this.el.parentElement, positioningOptions);
} else {
// Position menu relatively to inner toggler
const togglerRef = useRef("togglerRef");
usePosition(() => togglerRef.el, positioningOptions);
}
}