From e912cd50eed02e4d633e27e4d68289d479d7ed77 Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Tue, 21 Mar 2023 08:43:35 +0000
Subject: [PATCH] [FIX] web: sub dropdown item menu when checked in RTL mode

In RTL mode, sub dropdown carret are inverted so when a item menu in a
dropdown is checked, the carret and the check icon are on the same
pseudo-element (e.g. `::befor`).

In this commit, when the carret of a sub dropdown is on the left we set the check
icon on the `::after` pseudo-element to avoid CSS rules collision.

Steps to reproduce:
* Select/configure a RTL language in Odoo for the current user
* Open the Sales app
* Filter by the Create Date and select a sub option
=> BUG the check icon and the carret are on the same pseudo-element `::before`

Task ID: 3234638

closes odoo/odoo#116036

X-original-commit: c96ef2f258a5714d2285042da2f823e50b9b3049
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../web/static/src/webclient/webclient.scss   | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index bb8f77cf0a9..5c74d334277 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -101,7 +101,7 @@ kbd {
   box-shadow: $o-dropdown-box-shadow;
 }
 
-.dropdown-item {
+:not(.dropstart) > .dropdown-item {
   &.active, &.selected {
     position: relative;
     font-weight: $font-weight-bold;
@@ -126,6 +126,26 @@ kbd {
   }
 }
 
+/*!rtl:begin:ignore*/
+.o-dropdown.dropstart > .dropdown-item.dropdown-toggle:not(.dropdown-item_active_noarrow) {
+  &.active, &.selected {
+    &::after {
+      @include o-position-absolute(0, $left: 90%);
+      transform: translate(0, 90%);
+      font: .7em/1em FontAwesome;
+      color: $link-color;
+      display: inline-block;
+      content: "\f00c";
+      border: 0;
+    }
+
+    &.disabled:after {
+      color: $dropdown-link-disabled-color;
+    }
+  }
+}
+/*!rtl:end:ignore*/
+
 .dropdown-header {
   font-weight: $font-weight-bold;
   padding-bottom: .1em;