fix(textarea): disable user resize behavior (fix #165)

Author: mario-aleo

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;
+      },
     };
   }
 

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`