From 2ebb34b7cda66442a4d9b308e755f652c4b1db22 Mon Sep 17 00:00:00 2001
From: Hardik Prajapati <hap@odoo.com>
Date: Wed, 21 Apr 2021 10:51:38 +0000
Subject: [PATCH] [FIX] web: open list optional fields dropdown position to
 right place

Currently, the optional field's dropdown displays outside of the form view when
columns are expanded. it happens because the left css property is applied when
the column is expanded.

This commit fixes the issue by applying the correct css property after this
commit, the optional field's dropdown should always be positioned on the
right side of the list in ltr mode.

closes #69727
TaskID-2510187

closes odoo/odoo#73411

X-original-commit: bbc338438518bbb7d0e9ad1a313e872f95a36870
Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>
---
 .../src/legacy/js/views/list/list_renderer.js | 13 ++++---
 .../static/tests/legacy/views/list_tests.js   | 39 +++++++++++++++++++
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/legacy/js/views/list/list_renderer.js b/addons/web/static/src/legacy/js/views/list/list_renderer.js
index d50529b7630..1b55efd73f2 100644
--- a/addons/web/static/src/legacy/js/views/list/list_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_renderer.js
@@ -1295,13 +1295,16 @@ var ListRenderer = BasicRenderer.extend({
         // default, which is why we need to toggle the dropdown manually.
         ev.stopPropagation();
         this.$('.o_optional_columns .dropdown-toggle').dropdown('toggle');
-        // Explicitly set left of the optional column dropdown as it is pushed inside
-        // this.$el, so we need to position it at the end of top left corner in case of
-        // rtl language direction.
+        // Explicitly set left/right of the optional column dropdown as it is pushed
+        // inside this.$el, so we need to position it at the end of top left corner.
+        var position = (this.$(".table-responsive").css('overflow') === "auto" ? this.$el.width() :
+            this.$('table').width());
+        var direction = "left";
         if (_t.database.parameters.direction === 'rtl') {
-            var left = this.$('.o_optional_columns .o_optional_columns_dropdown').width();
-            this.$('.o_optional_columns').css("left", left);
+            position = position - this.$('.o_optional_columns .o_optional_columns_dropdown').width();
+            direction = "right";
         }
+        this.$('.o_optional_columns').css(direction, position);
     },
     /**
      * Manages the keyboard events on the list. If the list is not editable, when the user navigates to
diff --git a/addons/web/static/tests/legacy/views/list_tests.js b/addons/web/static/tests/legacy/views/list_tests.js
index 7f08aaedd8e..6ddcb1862a3 100644
--- a/addons/web/static/tests/legacy/views/list_tests.js
+++ b/addons/web/static/tests/legacy/views/list_tests.js
@@ -11102,6 +11102,45 @@ QUnit.module('Views', {
         delete fieldRegistry.map.asyncwidget;
     });
 
+    QUnit.test('open list optional fields dropdown position to right place', async function (assert) {
+        assert.expect(1);
+
+        this.data.bar.fields.name = { string: "Name", type: "char", sortable: true };
+        this.data.bar.fields.foo = { string: "Foo", type: "char", sortable: true };
+        this.data.foo.records[0].o2m = [1, 2];
+
+        const form = await createView({
+            View: FormView,
+            model: 'foo',
+            data: this.data,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="Page 1">
+                                <field name="o2m">
+                                    <tree editable="bottom">
+                                        <field name="display_name"/>
+                                        <field name="foo"/>
+                                        <field name="name" optional="hide"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            res_id: 1,
+        });
+
+        const listWidth = form.el.querySelector('.o_list_view').offsetWidth;
+
+        await testUtils.dom.click(form.el.querySelector('.o_optional_columns_dropdown_toggle'));
+        assert.strictEqual(form.el.querySelector('.o_optional_columns').offsetLeft, listWidth,
+            "optional fields dropdown should opened at right place");
+
+        form.destroy();
+    });
+
     QUnit.test('change the viewType of the current action', async function (assert) {
         assert.expect(25);