From 652f7259e4d47c0aa86cff807c6059ea3b825484 Mon Sep 17 00:00:00 2001
From: Nicolas Lempereur <nle@odoo.com>
Date: Wed, 17 Aug 2022 09:25:44 +0000
Subject: [PATCH] [FIX] web: dropdown left-positionned in RTL

The dropdown is positionned from the left, with comming from bootstrap:

- left: 0; # from CSS [OVERRIDEN]
- right: auto; # from CSS
- left: 0px; # from JS
- transform: translate3d(123px, 0px, 0px); # from JS

the 123 pixels is the offset to the left border of the parent component.

This is working in left-to-right, but in right-to-left, only the CSS
style is reversed and we get:

- right: 0; # from CSS
- left: auto; # from CSS [OVERRIDEN]
- left: 0px;
- transform: translate3d(123px, 0px, 0px);

Since the result is `right: 0; left: 0px` the size of the dropdown is
set to 100%, but this is not taken into account by Popper.computeStyle
which will have a 100% parent width Popper set at the position of the
small width Popper.

Graphical example:

```
[----------------------] # width of the page
[---]                    # popper in LTR
                   [---] # popper in RTL with fix
         [-------------] # popper parent size
                   [-------------] # popper in RTL without fix
```

as shown, without the fix, the popper content might overflow outside of
the page, and the content aligned to the right unseen).

opw-2926863

closes odoo/odoo#99355

X-original-commit: a883d0de0336c85ebab411ec42ae0e9936b5195f
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>
---
 .../web/static/src/legacy/scss/bootstrap_review.scss  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/addons/web/static/src/legacy/scss/bootstrap_review.scss b/addons/web/static/src/legacy/scss/bootstrap_review.scss
index e6f5f1f43df..163191c0334 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_review.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_review.scss
@@ -103,6 +103,17 @@
     cursor: pointer;
 }
 
+// Disable RTL for the dropdown position
+.dropdown-menu {
+    &[x-placement^="top"],
+    &[x-placement^="right"],
+    &[x-placement^="bottom"],
+    &[x-placement^="left"] {
+        /*rtl:ignore*/
+        right: auto;
+    }
+}
+
 // Disable RTL for the popover position
 .popover {
     right: auto#{"/*rtl:ignore*/"};