[FIX] web: list: optional field dropdown expands toward the list

Be in RTL mode, on a list view
Click on the button to set up optional fields

Before this commit, the dropdown expanded to the right, and was partly invisible

After this commit, we dynamically set to which direction the dropdown should expand
depending on RTL/LTR
Consequently the dropdown is fully visible in either mode, and expands to the list
rather than away from it

closes #39402

closes odoo/odoo#39628

X-original-commit: fb914d176de5a4711f11de32945ebaec0164f62e
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>

1 files changed, 8 insertions, 1 deletions

diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index cedd0100295..2b90f4bfb2b 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -868,8 +868,15 @@ var ListRenderer = BasicRenderer.extend({
             'aria-expanded': false,
         });
         $a.appendTo($optionalColumnsDropdown);
+
+        // Set the expansion direction of the dropdown
+        // The button is located at the end of the list headers
+        // We want the dropdown to expand towards the list rather than away from it
+        // https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
+        var direction = _t.database.parameters.direction;
+        var dropdownMenuClass = direction === 'rtl' ? 'dropdown-menu-left' : 'dropdown-menu-right';
         var $dropdown = $("<div>", {
-            class: 'dropdown-menu dropdown-menu-right o_optional_columns_dropdown',
+            class: 'dropdown-menu o_optional_columns_dropdown ' + dropdownMenuClass,
             role: 'menu',
         });
         this.optionalColumns.forEach(function (col) {