From 30f2a7f14932bf9b481f258d9f0f93809e084db1 Mon Sep 17 00:00:00 2001 From: Mohammed Shekha Date: Wed, 28 Oct 2020 12:49:49 +0000 Subject: [PATCH] [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#64085 X-original-commit: a14c74d926b35dc499914edcbb7b93e638fe3bce Signed-off-by: Aaron Bohy (aab) --- addons/web/static/src/js/views/list/list_renderer.js | 9 ++++++++- addons/web/static/tests/views/list_tests.js | 8 ++++---- 2 files changed, 12 insertions(+), 5 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 8d3d74ee7fe..5a1e3e7eec8 100644 --- a/addons/web/static/src/js/views/list/list_renderer.js +++ b/addons/web/static/src/js/views/list/list_renderer.js @@ -1112,7 +1112,7 @@ var ListRenderer = BasicRenderer.extend({ this.$('table').append( $('') ); - this.$('table').append(this._renderOptionalColumnsDropdown()); + this.$el.append(this._renderOptionalColumnsDropdown()); } if (this.selection.length) { const $checked_rows = this.$('tr').filter( @@ -1284,6 +1284,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 diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js index eabc0230626..f5c475889c3 100644 --- a/addons/web/static/tests/views/list_tests.js +++ b/addons/web/static/tests/views/list_tests.js @@ -10197,10 +10197,10 @@ QUnit.module('Views', { assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle', "should have the optional columns dropdown toggle inside the table"); - const optionalFieldsToggler = list.el.querySelector('table').lastElementChild.previousSibling; + const optionalFieldsToggler = list.el.querySelector('table').lastElementChild; assert.ok(optionalFieldsToggler.classList.contains('o_optional_columns_dropdown_toggle'), 'The optional fields toggler is the second last element'); - const optionalFieldsDropdown = list.el.querySelector('table').lastElementChild; + const optionalFieldsDropdown = list.el.querySelector('.o_list_view').lastElementChild; assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'), 'The optional fields dropdown is the last element'); @@ -10265,10 +10265,10 @@ QUnit.module('Views', { assert.containsOnce(list.$('table'), '.o_optional_columns_dropdown_toggle', "should have the optional columns dropdown toggle inside the table"); - const optionalFieldsToggler = list.el.querySelector('table').lastElementChild.previousSibling; + const optionalFieldsToggler = list.el.querySelector('table').lastElementChild; assert.ok(optionalFieldsToggler.classList.contains('o_optional_columns_dropdown_toggle'), 'The optional fields toggler is the last element'); - const optionalFieldsDropdown = list.el.querySelector('table').lastElementChild; + const optionalFieldsDropdown = list.el.querySelector('.o_list_view').lastElementChild; assert.ok(optionalFieldsDropdown.classList.contains('o_optional_columns'), 'The optional fields is the last element');