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

---
 .../TimePicker/TimePicker.Story.svelte          |  6 +++++-
 src/components/TimePicker/TimePicker.svelte     |  8 +++++---
 .../TimePicker/TimePickerSelect.svelte          | 17 ++++++-----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/TimePicker/TimePicker.Story.svelte b/src/components/TimePicker/TimePicker.Story.svelte
index 3a8537d3..29e9b507 100644
--- a/src/components/TimePicker/TimePicker.Story.svelte
+++ b/src/components/TimePicker/TimePicker.Story.svelte
@@ -1,12 +1,16 @@
 <script>
   import Layout from '../../internal/ui/Layout.svelte';
+  import { SelectItem } from '../Select';
   import TimePicker from './TimePicker.svelte';
   import TimePickerSelect from './TimePickerSelect.svelte';
-  import { SelectItem } from '../Select';
 
   let value = '';
   let select1 = 'PM';
   let select2 = 'Time zone 1';
+
+  $: {
+    console.log(value, select1, select2);
+  }
 </script>
 
 <Layout>
diff --git a/src/components/TimePicker/TimePicker.svelte b/src/components/TimePicker/TimePicker.svelte
index 156af8d6..85f90fbf 100644
--- a/src/components/TimePicker/TimePicker.svelte
+++ b/src/components/TimePicker/TimePicker.svelte
@@ -23,18 +23,21 @@
     <div class={cx('--time-picker__input')}>
       {#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}
       <input
         data-invalid={invalid || undefined}
         class={cx('--time-picker__input-field', '--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
+        on:change
         on:input
         on:input={({ target }) => {
           value = target.value;
         }}
+        on:focus
+        on:blur
         {pattern}
         {placeholder}
         {maxlength}
@@ -42,7 +45,6 @@
         {type}
         {value}
         {disabled} />
-
     </div>
     <slot />
   </div>
diff --git a/src/components/TimePicker/TimePickerSelect.svelte b/src/components/TimePicker/TimePickerSelect.svelte
index d92e4157..5a1927ea 100644
--- a/src/components/TimePicker/TimePickerSelect.svelte
+++ b/src/components/TimePicker/TimePickerSelect.svelte
@@ -9,21 +9,16 @@
   export let disabled = false;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
+  import { setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
   let selected = writable(value);
 
   setContext('TimePickerSelect', { selected });
 
-  $: {
-    selected.set(value);
-    dispatch('change', $selected);
-  }
+  $: selected.set(value);
   $: value = $selected;
 </script>
 
@@ -39,12 +34,12 @@
   {/if}
   <select
     class={cx('--select-input')}
-    {id}
-    {disabled}
-    {value}
     on:change={({ target }) => {
       selected.set(target.value);
-    }}>
+    }}
+    {id}
+    {disabled}
+    {value}>
     <slot />
   </select>
   <ChevronDownGlyph