fix(textarea): delegate readonly to the native element

Co-authored-by: Nithya Lakshmi <nithyalakshmicse97@gmail.com>

Author: Joren Broekema

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

packages/textarea/test/lion-textarea.test.js

@@ -22,12 +22,14 @@ describe('<lion-textarea>', () => {
     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(`<lion-textarea>foo</lion-textarea>`);
     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('<lion-textarea>', () => {
     expect(el.inputElement.getAttribute('rows')).to.be.equal('8');
   });
 
+  it('sync readOnly to the native textarea', async () => {
+    const el = await fixture(`<lion-textarea readonly>foo</lion-textarea>`);
+    expect(el.readOnly).to.be.true;
+    expect(el.querySelector('textarea').readOnly).to.be.true;
+  });
+
   it('disables user resize behavior', async () => {
     if (!hasBrowserResizeSupport()) {
       return;