[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>
This commit is contained in:
Hardik Prajapati
2021-07-08 10:03:09 +00:00
co-authored by Mohammed Shekha
parent 28973f3ae4
commit 2ebb34b7cd
2 changed files with 47 additions and 5 deletions
@@ -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
@@ -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);