From 9988e071fca6ab0fa4a4541302d999d2fd6ad8ba Mon Sep 17 00:00:00 2001
From: Mario Aleo <marioaleo@gmail.com>
Date: Mon, 22 Jul 2019 17:45:47 +0000
Subject: [PATCH] fix(textarea): disable user resize behavior (fix #165)

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

diff --git a/packages/textarea/src/LionTextarea.js b/packages/textarea/src/LionTextarea.js
index 5593ae384..f44191486 100644
--- a/packages/textarea/src/LionTextarea.js
+++ b/packages/textarea/src/LionTextarea.js
@@ -40,7 +40,16 @@ export class LionTextarea extends ObserverMixin(LionInput) {
   get slots() {
     return {
       ...super.slots,
-      input: () => document.createElement('textarea'),
+      input: () => {
+        const input = document.createElement('textarea');
+
+        // disable user resize behavior if browser supports it
+        if (input.style.resize !== undefined) {
+          input.style.resize = 'none';
+        }
+
+        return input;
+      },
     };
   }
 
diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js
index ea6b9d880..457e5afca 100644
--- a/packages/textarea/test/lion-textarea.test.js
+++ b/packages/textarea/test/lion-textarea.test.js
@@ -2,6 +2,11 @@ import { expect, fixture, html } from '@open-wc/testing';
 
 import '../lion-textarea.js';
 
+function hasBrowserResizeSupport() {
+  const textarea = document.createElement('textarea');
+  return textarea.style.resize !== undefined;
+}
+
 describe('<lion-textarea>', () => {
   it(`can be used with the following declaration
   ~~~
@@ -17,6 +22,16 @@ describe('<lion-textarea>', () => {
     expect(el.maxRows).to.equal(6);
   });
 
+  it('disables user resize behavior', async () => {
+    if (!hasBrowserResizeSupport()) {
+      return;
+    }
+
+    const el = await fixture(`<lion-textarea></lion-textarea>`);
+    const computedStyle = window.getComputedStyle(el.inputElement);
+    expect(computedStyle.resize).to.equal('none');
+  });
+
   it('supports initial modelValue', async () => {
     const el = await fixture(
       html`