[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:
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user