diff --git a/packages/text-area/src/vaadin-text-area-mixin.js b/packages/text-area/src/vaadin-text-area-mixin.js index 3a1cdd9af24..ac1d4d7070a 100644 --- a/packages/text-area/src/vaadin-text-area-mixin.js +++ b/packages/text-area/src/vaadin-text-area-mixin.js @@ -235,6 +235,8 @@ export const TextAreaMixin = (superClass) => parseFloat(inputStyle.paddingBottom) + parseFloat(inputStyle.marginTop) + parseFloat(inputStyle.marginBottom) + + parseFloat(inputFieldStyle.borderTopWidth) + + parseFloat(inputFieldStyle.borderBottomWidth) + parseFloat(inputFieldStyle.paddingTop) + parseFloat(inputFieldStyle.paddingBottom); const maxHeight = Math.ceil(contentHeight + marginsAndPaddings); diff --git a/packages/text-area/test/text-area.test.js b/packages/text-area/test/text-area.test.js index f3aeb92239c..efa645a6b42 100644 --- a/packages/text-area/test/text-area.test.js +++ b/packages/text-area/test/text-area.test.js @@ -363,7 +363,7 @@ describe('text-area', () => { expect(textArea.clientHeight).to.equal(lineHeight * 4); }); - it('should include margins and paddings when calculating max-height', async () => { + it('should include margins, paddings and borders when calculating max-height', async () => { const native = textArea.querySelector('textarea'); const inputContainer = textArea.shadowRoot.querySelector('[part="input-field"]'); native.style.paddingTop = '5px'; @@ -372,12 +372,14 @@ describe('text-area', () => { native.style.marginBottom = '20px'; inputContainer.style.paddingTop = '25px'; inputContainer.style.paddingBottom = '30px'; + inputContainer.style.borderTop = 'solid 35px'; + inputContainer.style.borderBottom = 'solid 40px'; textArea.maxRows = 4; textArea.value = Array(400).join('400'); await nextUpdate(textArea); - expect(textArea.clientHeight).to.equal(lineHeight * 4 + 5 + 10 + 15 + 20 + 25 + 30); + expect(textArea.clientHeight).to.equal(lineHeight * 4 + 5 + 10 + 15 + 20 + 25 + 30 + 35 + 40); }); it('should shrink below max-height defined by maximum rows', async () => {