diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js index a0857418a..ab9315200 100644 --- a/packages/textarea/src/LionTextarea.js +++ b/packages/textarea/src/LionTextarea.js @@ -19,6 +19,11 @@ export class LionTextarea extends LionField { type: Number, reflect: true, }, + readOnly: { + type: Boolean, + attribute: 'readonly', + reflect: true, + }, }; } @@ -42,6 +47,7 @@ export class LionTextarea extends LionField { super(); this.rows = 2; this.maxRows = 6; + this.readOnly = false; } connectedCallback() { @@ -63,6 +69,13 @@ export class LionTextarea extends LionField { } } + if (changedProperties.has('readOnly')) { + const native = this.inputElement; + if (native) { + native.readOnly = this.readOnly; + } + } + if (changedProperties.has('modelValue')) { this.resizeTextarea(); } diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js index 76582ed85..4cc716897 100644 --- a/packages/textarea/test/lion-textarea.test.js +++ b/packages/textarea/test/lion-textarea.test.js @@ -22,12 +22,14 @@ describe('', () => { expect(el.maxRows).to.equal(6); }); - it('has .rows=2 and rows="2" by default', async () => { + it('has .readOnly=false .rows=2 and rows="2" by default', async () => { const el = await fixture(`foo`); expect(el.rows).to.equal(2); expect(el.getAttribute('rows')).to.be.equal('2'); expect(el.inputElement.rows).to.equal(2); expect(el.inputElement.getAttribute('rows')).to.be.equal('2'); + expect(el.readOnly).to.be.false; + expect(el.inputElement.hasAttribute('readonly')).to.be.false; }); it('sync rows down to the native textarea', async () => { @@ -38,6 +40,12 @@ describe('', () => { expect(el.inputElement.getAttribute('rows')).to.be.equal('8'); }); + it('sync readOnly to the native textarea', async () => { + const el = await fixture(`foo`); + expect(el.readOnly).to.be.true; + expect(el.querySelector('textarea').readOnly).to.be.true; + }); + it('disables user resize behavior', async () => { if (!hasBrowserResizeSupport()) { return;