fix: include border width in max-height calculation (#9213) (#9215)

* fix: include border width in max-height calculation

* update test

---------

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: 3 people

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);

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 () => {