[FIX] web: compute the correct height for textarea autoresize

The box-sizing property was not correctly taken into account.

- content-box is the standard behavior: border and padding are added after the height
- border-box needs attention: border and padding must be included into the computed height

Task: 1869469
PR: #26430
This commit is contained in:
Sébastien Theys
2018-08-22 11:51:30 +02:00
parent 241704536d
commit 4310b11df5
2 changed files with 35 additions and 5 deletions
+5 -5
View File
@@ -74,12 +74,12 @@ return {
function resize() {
$fixedTextarea.insertAfter($textarea);
var heightOffset;
var heightOffset = 0;
var style = window.getComputedStyle($textarea[0], null);
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
if (style.boxSizing === 'border-box') {
var paddingHeight = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
var borderHeight = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
heightOffset = borderHeight + paddingHeight;
}
$fixedTextarea.width($textarea.width());
$fixedTextarea.val($textarea.val());
@@ -1457,6 +1457,36 @@ QUnit.module('basic_fields', {
form.destroy();
});
QUnit.test('text fields edit mode inside list have correct height on focus', function (assert) {
assert.expect(2);
this.data.partner.records[0].txt = "a\nb\nc\nd\ne\nf";
var list = createView({
View: ListView,
model: 'partner',
data: this.data,
arch: '<list editable="top">' +
'<field name="txt"/>' +
'</list>',
});
// Click to enter edit: in this test we specifically rely on setting
// the focus on the textarea to trigger the resize.
// The main goal is to test the size is correct, not how it is triggered.
list.$('.o_data_cell:first').click();
var $textarea = list.$('textarea:first');
// make sure the correct data is there
assert.strictEqual($textarea.val(), this.data.partner.records[0].txt);
// make sure there is no scroll bar
assert.strictEqual($textarea.innerHeight(), $textarea[0].scrollHeight,
"textarea should not have a scroll bar");
list.destroy();
});
QUnit.test('text field translatable', function (assert) {
assert.expect(3);