diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js index b727452c1..5593ae384 100644 --- a/packages/textarea/src/LionTextarea.js +++ b/packages/textarea/src/LionTextarea.js @@ -65,6 +65,10 @@ export class LionTextarea extends ObserverMixin(LionInput) { * To support maxRows we need to set max-height of the textarea */ setTextareaMaxHeight() { + const { value } = this.inputElement; + this.inputElement.value = ''; + this.resizeTextarea(); + const cs = window.getComputedStyle(this.inputElement, null); const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.height) / this.rows; const paddingOffset = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom); @@ -72,6 +76,9 @@ export class LionTextarea extends ObserverMixin(LionInput) { const offset = cs.boxSizing === 'border-box' ? paddingOffset + borderOffset : 0; this.inputElement.style.maxHeight = `${lineHeight * this.maxRows + offset}px`; + + this.inputElement.value = value; + this.resizeTextarea(); } static get styles() { diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js index 0e2aebf2d..ea6b9d880 100644 --- a/packages/textarea/test/lion-textarea.test.js +++ b/packages/textarea/test/lion-textarea.test.js @@ -61,6 +61,31 @@ describe('', () => { }, Promise.resolve(0)); }); + it('stops growing after property "maxRows" is reached when there was an initial value', async () => { + const el = await fixture( + html` + + `, + ); + + return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => { + const oldHeight = await heightPromise; + el.modelValue += `\n`; + await el.updateComplete; + const newHeight = el.offsetHeight; + + if (i > el.maxRows) { + // stop growing + expect(newHeight).to.equal(oldHeight); + } else if (i > el.rows) { + // growing normally + expect(newHeight >= oldHeight).to.equal(true); + } + + return Promise.resolve(newHeight); + }, Promise.resolve(0)); + }); + it('stops shrinking after property "rows" is reached', async () => { const el = await fixture( html`