diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 31910cc3938..f82c784a570 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -4,6 +4,8 @@
@@ -15,7 +17,7 @@
-
+
diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index a55318eb48e..6b15cda3461 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -67,13 +67,17 @@ export class Dropdown extends Component {
this.hasParentDropdown = this.env.inDropdown;
useSubEnv({ inDropdown: true });
this.rootTag = this.props.tag || (this.hasParentDropdown ? "li" : "div");
- const position =
- this.props.position || (this.hasParentDropdown ? "right-start" : "bottom-start");
// Set up key navigation -----------------------------------------------
useDropdownNavigation();
// Set up toggler and positioning --------------------------------------
+ const positioningOptions = {
+ popper: "menuRef",
+ position:
+ this.props.position || (this.hasParentDropdown ? "right-start" : "bottom-start"),
+ directionFlipOrder: { right: "rl", bottom: "bt", top: "tb", left: "lr" },
+ };
if (this.props.toggler === "parent") {
// Add parent click listener to handle toggling
useEffect(
@@ -94,11 +98,11 @@ export class Dropdown extends Component {
);
// Position menu relatively to parent element
- usePosition(() => this.el.parentElement, { popper: "menuRef", position });
+ usePosition(() => this.el.parentElement, positioningOptions);
} else {
// Position menu relatively to inner toggler
const togglerRef = useRef("togglerRef");
- usePosition(() => togglerRef.el, { popper: "menuRef", position });
+ usePosition(() => togglerRef.el, positioningOptions);
}
}
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 5cfaf911d60..1f46c7d3dc8 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -67,6 +67,7 @@
&_menu {
@extend .dropdown-menu;
+ position: relative;
&.o_dropdown_menu_right {
// FIXME: does commenting this break anything?
@@ -74,9 +75,8 @@
}
& > li.o_dropdown {
- &.navigated > .o_dropdown_toggler {
- // FIXME: without this there is no selection feedback
- // @extend :hover;
+ &.focus > .o_dropdown_toggler {
+ background-color: $dropdown-link-hover-bg;
}
& > .o_dropdown_toggler {
// FIXME: without this there is no selection feedback
@@ -117,11 +117,8 @@
// FIXME: does commenting this break anything?
//@extend .disabled;
}
- &.active > :first-child {
- // FIXME: without this there is no selection feedback
- // @extend :hover;
- background-color: rgba(0, 0, 0, 0.08);
- color: #091124;
+ &.focus {
+ background-color: $dropdown-link-hover-bg;
}
}
}
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index 4307327a3f7..525c5b66317 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -5,7 +5,7 @@