pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: dropdown: avoid positioning in mobile

Browse Source 
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>
This commit is contained in:
Lucas Perais (lpe)
2021-09-27 05:59:46 +00:00
parent 65dec306b9
commit 5208c68f0c
1 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/dropdown/dropdown.js
+29 -23
View File
@@ -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);
}
}
}