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);