From 79c51767af528ed3d4054d2211f50621e0e15546 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C5=82awek=20Amielucha?= <amielucha@gmail.com>
Date: Wed, 19 Feb 2020 17:16:56 +0100
Subject: [PATCH] fix(textarea): support placeholder (#578)

---
 packages/textarea/src/LionTextarea.js        | 11 +++++++++++
 packages/textarea/test/lion-textarea.test.js | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js
index 0584fd114..f9945f474 100644
--- a/packages/textarea/src/LionTextarea.js
+++ b/packages/textarea/src/LionTextarea.js
@@ -24,6 +24,10 @@ export class LionTextarea extends LionField {
         attribute: 'readonly',
         reflect: true,
       },
+      placeholder: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -79,6 +83,13 @@ export class LionTextarea extends LionField {
       }
     }
 
+    if (changedProperties.has('placeholder')) {
+      const native = this._inputNode;
+      if (native) {
+        native.placeholder = this.placeholder;
+      }
+    }
+
     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 71370f8a2..e87b52724 100644
--- a/packages/textarea/test/lion-textarea.test.js
+++ b/packages/textarea/test/lion-textarea.test.js
@@ -140,6 +140,17 @@ describe('<lion-textarea>', () => {
       .and.to.be.below(el.scrollHeight);
   });
 
+  it('has an attribute that can be used to set the placeholder text of the textarea', async () => {
+    const el = await fixture(`<lion-textarea placeholder="text"></lion-textarea>`);
+    expect(el.getAttribute('placeholder')).to.equal('text');
+    expect(el._inputNode.getAttribute('placeholder')).to.equal('text');
+
+    el.placeholder = 'foo';
+    await el.updateComplete;
+    expect(el.getAttribute('placeholder')).to.equal('foo');
+    expect(el._inputNode.getAttribute('placeholder')).to.equal('foo');
+  });
+
   it('is accessible', async () => {
     const el = await fixture(`<lion-textarea label="Label"></lion-textarea>`);
     await expect(el).to.be.accessible();