[FIX] web: don't reset column size in list view after resizing

Reproduction:
1. Install Sales
2. Go to the quotations
3. Drag the column “name” and change the size
4. Check any sale order in checkbox
5. The column size is reset to default

Reason: the keepColumnWidths parameter isn’t set to True after changing
the size. This happens to all the list views

Fix: we freeze the list after resizing the columns. Remove the extra
keepColumnWidths setting in reordering since it's already set to true
after resizing. Also added tests to check the column size is kept after
toggling the checkboxes

A similar fix is here: https://github.com/odoo/odoo/pull/10902

opw-3113822

closes odoo/odoo#113607

X-original-commit: 30a346a90b633dd73fa823de2cdaf37a0e52c526
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>
Signed-off-by: Liu Jinjiu (jili) <jili@odoo.com>
This commit is contained in:
Jinjiu Liu
2023-02-24 12:14:41 +01:00
parent 1096ed7b5a
commit a211b7bf02
2 changed files with 66 additions and 2 deletions
@@ -888,8 +888,6 @@ export class ListRenderer extends Component {
const list = this.props.list;
if (this.isSortable(column)) {
list.sortBy(fieldName);
// don't resize column when reordering.
this.keepColumnWidths = true;
}
}
@@ -1756,6 +1754,8 @@ export class ListRenderer extends Component {
// Mouse or keyboard events : stop resize
const stopResize = (ev) => {
this.resizing = false;
// freeze column size after resizing
this.keepColumnWidths = true;
// Ignores the 'left mouse button down' event as it used to start resizing
if (ev.type === "mousedown" && ev.which === 1) {
return;
@@ -15304,6 +15304,70 @@ QUnit.module("Views", (hooks) => {
assertAlmostEqual(th2.offsetWidth, widthsAfterReorder[1] + widthsAfterReorder[2] / 2);
});
QUnit.test("list: resize column and toggle one checkbox", async function (assert) {
await makeView({
type: "list",
resModel: "foo",
serverData,
arch: `
<tree>
<field name="foo"/>
<field name="int_field"/>
</tree>`,
});
// 1. Resize column foo to middle of column int_field.
const th2 = target.querySelector("th:nth-child(2)");
const th3 = target.querySelector("th:nth-child(3)");
const resizeHandle = th2.querySelector(".o_resize");
await dragAndDrop(resizeHandle, th3);
const widthsAfterResize = [...target.querySelectorAll(".o_list_table th")].map(
(th) => th.offsetWidth
);
// 2. Column size should be the same after selecting a row
await click(target.querySelector("tbody .o_list_record_selector"));
const widthsAfterSelectRow = [...target.querySelectorAll(".o_list_table th")].map(
(th) => th.offsetWidth
);
assert.strictEqual(widthsAfterResize[0], widthsAfterSelectRow[0], "Width must not have been changed after selecting a row");
assert.strictEqual(widthsAfterResize[1], widthsAfterSelectRow[1], "Width must not have been changed after selecting a row");
});
QUnit.test("list: resize column and toggle check all", async function (assert) {
await makeView({
type: "list",
resModel: "foo",
serverData,
arch: `
<tree>
<field name="foo"/>
<field name="int_field"/>
</tree>`,
});
// 1. Resize column foo to middle of column int_field.
const th2 = target.querySelector("th:nth-child(2)");
const th3 = target.querySelector("th:nth-child(3)");
const resizeHandle = th2.querySelector(".o_resize");
await dragAndDrop(resizeHandle, th3);
const widthsAfterResize = [...target.querySelectorAll(".o_list_table th")].map(
(th) => th.offsetWidth
);
// 2. Column size should be the same after selecting all
await click(target.querySelector("thead .o_list_record_selector"));
const widthsAfterSelectAll = [...target.querySelectorAll(".o_list_table th")].map(
(th) => th.offsetWidth
);
assert.strictEqual(widthsAfterResize[0], widthsAfterSelectAll[0], "Width must not have been changed after selecting all");
assert.strictEqual(widthsAfterResize[1], widthsAfterSelectAll[1], "Width must not have been changed after selecting all");
});
QUnit.test("editable list: resize column headers", async function (assert) {
await makeView({
type: "list",