From 29c7c471c3544e104e3034c520e91a429c504b38 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 29 Dec 2019 19:17:30 -0800
Subject: [PATCH] refactor(textinput): forward events

---
 src/components/TextInput/PasswordInput.svelte | 27 ++++++++++++-------
 src/components/TextInput/TextInput.svelte     | 23 ++++++++++------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/components/TextInput/PasswordInput.svelte b/src/components/TextInput/PasswordInput.svelte
index 91f63e51..ce277218 100644
--- a/src/components/TextInput/PasswordInput.svelte
+++ b/src/components/TextInput/PasswordInput.svelte
@@ -26,11 +26,17 @@
   $: errorId = `error-${id}`;
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper', className)}
+  {style}>
   {#if labelText}
     <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}
@@ -44,16 +50,17 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
-      on:click
-      on:change
-      on:input
-      on:input={event => {
-        value = event.target.value;
-      }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {id}
       {placeholder}
       {type}
diff --git a/src/components/TextInput/TextInput.svelte b/src/components/TextInput/TextInput.svelte
index ec8d6cee..94fc2b2a 100644
--- a/src/components/TextInput/TextInput.svelte
+++ b/src/components/TextInput/TextInput.svelte
@@ -20,7 +20,13 @@
   $: errorId = `error-${id}`;
 </script>
 
-<div class={cx('--form-item', '--text-input-wrapper')} {style}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--form-item', '--text-input-wrapper', className)}
+  {style}>
   {#if labelText}
     <label
       for={id}
@@ -38,16 +44,17 @@
       <WarningFilled16 class={cx('--text-input__invalid-icon')} />
     {/if}
     <input
-      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
-      on:click
-      on:change
-      on:input
-      on:input={event => {
-        value = event.target.value;
-      }}
       data-invalid={invalid || undefined}
       aria-invalid={invalid || undefined}
       aria-describedby={invalid ? errorId : undefined}
+      class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur
       {id}
       {placeholder}
       {type}