[FIX] web: fix optional dropdown hide behind listview table

before this commit: when you have o2m which has optional fields and optional
field dropdown is bigger and o2m does not have records and when you open
optional dropdown it hidden behind o2m table. The reason is optional dropdown
is child of table.

after this commit: put dropdown as child of listview.$el so it is no more child
of table so when it is opened it is displayed on top of listview table, here we
also have to calculate position of optional dropdown as it is no more child of
table element, so we have to set left position based on table width and if
language direction is rtl then dropdown width.

task-2370860
Closes #62681

closes odoo/odoo#63698

X-original-commit: c026b322dd0e22e86e82e917e722a9f579978b3a
Signed-off-by: Aaron Bohy (aab) <aab@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 7559fda1063..05f7c6d5f09 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -1099,7 +1099,7 @@ var ListRenderer = BasicRenderer.extend({
                 this.$('table').append(
                     $('<i class="o_optional_columns_dropdown_toggle fa fa-ellipsis-v"/>')
                 );
-                this.$('table').append(this._renderOptionalColumnsDropdown());
+                this.$el.append(this._renderOptionalColumnsDropdown());
             }
             if (this.selection.length) {
                 const $checked_rows = this.$('tr').filter(
@@ -1271,6 +1271,13 @@ 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 right/left corner based
+        // on language direction.
+        var left = _t.database.parameters.direction === 'rtl' ?
+            this.$('.o_optional_columns .o_optional_columns_dropdown').width() :
+            this.$("table").width();
+        this.$('.o_optional_columns').css("left", left);
     },
     /**
      * Manages the keyboard events on the list. If the list is not editable, when the user navigates to