From 8ea50a807a5dc84c0bb82237d668d6c8fcc95a4b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 25 Dec 2019 07:16:43 -0800
Subject: [PATCH] refactor(toggle): access ref in afterUpdate method

---
 src/components/Toggle/Toggle.svelte           | 11 ++++-------
 src/components/ToggleSmall/ToggleSmall.svelte | 11 ++++-------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/Toggle/Toggle.svelte b/src/components/Toggle/Toggle.svelte
index e9ea762e..07b8f920 100644
--- a/src/components/Toggle/Toggle.svelte
+++ b/src/components/Toggle/Toggle.svelte
@@ -9,20 +9,17 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
 
   let inputRef = undefined;
 
-  $: {
+  afterUpdate(() => {
+    inputRef.checked = toggled;
     dispatch('toggle', { id, toggled });
-
-    if (inputRef) {
-      inputRef.checked = toggled;
-    }
-  }
+  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
diff --git a/src/components/ToggleSmall/ToggleSmall.svelte b/src/components/ToggleSmall/ToggleSmall.svelte
index 76d31b8b..a06b7336 100644
--- a/src/components/ToggleSmall/ToggleSmall.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.svelte
@@ -9,20 +9,17 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
 
   let inputRef = undefined;
 
-  $: {
+  afterUpdate(() => {
+    inputRef.checked = toggled;
     dispatch('toggle', { id, toggled });
-
-    if (inputRef) {
-      inputRef.checked = toggled;
-    }
-  }
+  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>