[FIX] web: form: ignore invisible items from rows

Before this commit, we had an issue with the width calculated
for data cell (see. sizeOfDataCell).
In some case, the width was 50% instead of taking 100% of the
available space.

This was because some elements of the inner groups that should not
have been visible were computed as if they were, taking an effective
slot in an innergroup's row.

E.g. with two labels:

Before:
"invisible label" and "label" on the same line with `style="width: infinite"`
"data field" on a second line with `style="width: 50%"`

After this commit:
"label" and "data field" on the same line with `style="width: 100%"`

Note that as `infinite` is not a valid value, this wasn't interpreted and
style attribute was empty.

Thanks to grid for still aligning elements even if they are technically
in different rows. It's why we only saw this issue because of the
width of the data cell.

Steps to reproduce:
- Go to Accounting
- Customer -> Invoice
- Create a new invoice
-> See Customer field

Thx to @kebeclibre

closes odoo/odoo#105489

X-original-commit: e177c63e3618e4b9e492a27d1301c098a0066cb6
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Adrien Dieudonné
2022-11-09 19:03:48 +01:00
parent a377708436
commit a68d8bd2fb
2 changed files with 29 additions and 0 deletions
@@ -61,6 +61,10 @@ export class InnerGroup extends Group {
const items = this.getItems();
while (items.length) {
const [slotName, slot] = items.shift();
if (!slot.isVisible) {
continue;
}
const { newline, itemSpan } = slot;
if (newline) {
rows.push(currentRow);
@@ -1941,6 +1941,31 @@ QUnit.module("Views", (hooks) => {
}
);
QUnit.test(
"two mutually exclusive labels with a dynamic invisible attribute",
async function (assert) {
await makeView({
type: "form",
resModel: "partner",
serverData,
arch: `
<form>
<sheet>
<group>
<label for="bar" string="label1" attrs='{"invisible": [["bar", "=", True]]}'/>
<label for="bar" string="label2" attrs='{"invisible": [["bar", "=", False]]}'/>
<field name="bar" nolabel="1"/>
</group>
</sheet>
</form>`,
resId: 2,
});
assert.containsOnce(target, "label.o_form_label", "Only one label should be displayed");
assert.strictEqual(target.querySelector("label.o_form_label").textContent, "label2");
assert.containsOnce(target, ".o_inner_group > div", "This group should only contain one line");
}
);
QUnit.test(
"label is not rendered when invisible and not at top-level in a group",
async function (assert) {