[FIX] web: allow to change the row on textarea in TextField with a prop

Before this commit, the rows attribute given on the TextField component
was always 2, it is not possible to alter it without overriding the
component.

This commit adds a props to be able to update the rows with a prop
called `rowCount` and this prop can be set via `rows` attribute set on
the field.

task-2947516

X-original-commit: 110915c80c2a2578563283b1744e0e88d80ac4bb
This commit is contained in:
Xavier BOL (xbo)
2022-10-10 17:03:04 +02:00
parent 0c35d43adf
commit 6a4e3dc030
2 changed files with 39 additions and 4 deletions
@@ -6,6 +6,7 @@ import { useInputField } from "../input_field_hook";
import { standardFieldProps } from "../standard_field_props";
import { TranslationButton } from "../translation_button";
import { useDynamicPlaceholder } from "../dynamicplaceholder_hook";
import { parseInteger } from '../parsers';
const { Component, useEffect, onMounted, onWillUnmount, useRef } = owl;
@@ -67,7 +68,7 @@ export class TextField extends Component {
return 50;
}
get rowCount() {
return 2;
return this.props.rowCount;
}
resize() {
@@ -105,23 +106,31 @@ TextField.template = "web.TextField";
TextField.components = {
TranslationButton,
};
TextField.defaultProps = {dynamicPlaceholder: false};
TextField.defaultProps = {
dynamicPlaceholder: false,
rowCount: 2,
};
TextField.props = {
...standardFieldProps,
isTranslatable: { type: Boolean, optional: true },
placeholder: { type: String, optional: true },
dynamicPlaceholder: { type: Boolean, optional: true},
rowCount: { type: Number, optional: true },
};
TextField.displayName = _lt("Multiline Text");
TextField.supportedTypes = ["html", "text"];
TextField.extractProps = ({ attrs, field }) => {
return {
const props = {
isTranslatable: field.translate,
placeholder: attrs.placeholder,
dynamicPlaceholder: attrs.options.dynamic_placeholder,
};
if (attrs.rows) {
props.rowCount = parseInteger(attrs.rows);
}
return props;
};
registry.category("fields").add("text", TextField);
@@ -131,8 +140,12 @@ export class ListTextField extends TextField {
return 0;
}
get rowCount() {
return 1;
return this.props.rowCount;
}
}
ListTextField.defaultProps = {
...TextField.defaultProps,
rowCount: 1,
};
registry.category("fields").add("list.text", ListTextField);
@@ -240,6 +240,28 @@ QUnit.module("Fields", (hooks) => {
);
});
QUnit.test("set row on text fields", async function (assert) {
serverData.models.partner.fields.foo.type = "text";
await makeView({
type: "form",
resModel: "partner",
resId: 1,
serverData,
arch: `
<form>
<field name="foo" rows="4"/>
</form>`,
});
const textarea = target.querySelector("textarea");
assert.strictEqual(
textarea.rows,
4,
"rowCount should be the one set on the field",
);
});
QUnit.test(
"autoresize of text fields is done when switching to edit mode",
async function (assert) {