From 77046a4959ac985e8e4ea76a225e22331dc5e79a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2019 19:13:35 -0800
Subject: [PATCH] refactor(textarea): remove dispatch, forward events

---
 src/components/TextArea/TextArea.svelte | 39 +++++++++----------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/components/TextArea/TextArea.svelte b/src/components/TextArea/TextArea.svelte
index 6cdbee73..6a1c0021 100644
--- a/src/components/TextArea/TextArea.svelte
+++ b/src/components/TextArea/TextArea.svelte
@@ -1,12 +1,12 @@
 <script>
   let className = undefined;
   export { className as class };
+  export let rows = 4;
   export let cols = 50;
   export let disabled = false;
   export let id = Math.random();
   export let labelText = '';
   export let placeholder = '';
-  export let rows = 4;
   export let value = '';
   export let invalid = false;
   export let invalidText = '';
@@ -15,20 +15,17 @@
   export let light = false;
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   $: errorId = `error-${id}`;
 </script>
 
-<div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
   {#if labelText && !hideLabel}
     <label
-      for={id}
-      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}>
+      class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
+      for={id}>
       {labelText}
     </label>
   {/if}
@@ -42,32 +39,22 @@
       <WarningFilled16 class={cx('--text-area__invalid-icon')} />
     {/if}
     <textarea
-      on:click={event => {
-        if (!disabled) {
-          dispatch('click', event);
-        }
-      }}
-      on:change={event => {
-        if (!disabled) {
-          dispatch('change', event);
-        }
-      }}
-      on:input={event => {
-        value = event.target.value;
-        if (!disabled) {
-          dispatch('input', event);
-        }
-      }}
-      class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {disabled}
       {id}
       {cols}
       {rows}
       {value}
-      {placeholder}
-      {value} />
+      {placeholder} />
   </div>
   {#if invalid}
     <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>