[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>

2 files changed, 57 insertions, 2 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) {
diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js
index 49c8209c4c1..ee6edf8941c 100644
--- a/addons/web/static/tests/views/list_tests.js
+++ b/addons/web/static/tests/views/list_tests.js
@@ -7999,7 +7999,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('list view with optional fields rendering', async function (assert) {
-        assert.expect(9);
+        assert.expect(11);
 
         var RamStorageService = AbstractStorageService.extend({
             storage: new RamStorage(),
@@ -8018,6 +8018,9 @@ QUnit.module('Views', {
             services: {
                 local_storage: RamStorageService,
             },
+            translateParameters: {
+                direction: 'ltr',
+            }
         });
 
         assert.containsN(list, 'th', 3,
@@ -8026,6 +8029,13 @@ QUnit.module('Views', {
         assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle',
             "should have the optional columns dropdown toggle inside the table");
 
+        var $optionalFieldsToggler = list.$('table *:last()');
+        assert.ok($optionalFieldsToggler.hasClass('o_optional_columns_dropdown_toggle'),
+            'The optional fields toggler is the last element');
+
+        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-right'),
+            'In LTR, the dropdown should be anchored to the right and expand to the left');
+
         // optional fields
         await testUtils.dom.click(list.$('table .o_optional_columns_dropdown_toggle'));
         assert.containsN(list, 'div.o_optional_columns div.dropdown-item', 2,
@@ -8056,6 +8066,44 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('list view with optional fields rendering in RTL mode', async function (assert) {
+        assert.expect(3);
+
+        var RamStorageService = AbstractStorageService.extend({
+            storage: new RamStorage(),
+        });
+
+        var list = await createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: '<tree>' +
+                    '<field name="foo"/>' +
+                    '<field name="m2o" optional="hide"/>' +
+                    '<field name="amount"/>' +
+                    '<field name="reference" optional="hide"/>' +
+                '</tree>',
+            services: {
+                local_storage: RamStorageService,
+            },
+            translateParameters: {
+                direction: 'rtl',
+            }
+        });
+
+        assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle',
+            "should have the optional columns dropdown toggle inside the table");
+
+        var $optionalFieldsToggler = list.$('table *:last()');
+        assert.ok($optionalFieldsToggler.hasClass('o_optional_columns_dropdown_toggle'),
+            'The optional fields toggler is the last element');
+
+        assert.ok(list.$('.o_optional_columns .dropdown-menu').hasClass('dropdown-menu-left'),
+            'In RTL, the dropdown should be anchored to the left and expand to the right');
+
+        list.destroy();
+    });
+
     QUnit.test('optional fields do not disappear even after listview reload', async function (assert) {
         assert.expect(7);