From 52dd2445167e42d82bd5fc0c20e9b5938cf242c7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 25 Dec 2019 07:17:51 -0800
Subject: [PATCH] refactor(switch): focus ref in afterUpdate method

---
 src/components/ContentSwitcher/Switch.svelte | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ContentSwitcher/Switch.svelte b/src/components/ContentSwitcher/Switch.svelte
index bc3c7f7b..f88314b3 100644
--- a/src/components/ContentSwitcher/Switch.svelte
+++ b/src/components/ContentSwitcher/Switch.svelte
@@ -6,8 +6,8 @@
   export let disabled = false;
   export let style = undefined;
 
+  import { afterUpdate, getContext } from 'svelte';
   import { cx } from '../../lib';
-  import { getContext } from 'svelte';
 
   const id = Math.random();
   const { currentId, add, update, change } = getContext('ContentSwitcher');
@@ -16,10 +16,13 @@
 
   add({ id, text, selected });
 
+  afterUpdate(() => {
+    if (selected) {
+      buttonRef.focus();
+    }
+  });
+
   $: selected = $currentId === id;
-  $: if (selected && buttonRef) {
-    buttonRef.focus();
-  }
 </script>
 
 <button
@@ -36,10 +39,10 @@
   on:mouseenter
   on:mouseleave
   on:keydown
-  on:keydown={event => {
-    if (event.key === 'ArrowRight') {
+  on:keydown={({ key }) => {
+    if (key === 'ArrowRight') {
       change(1);
-    } else if (event.key === 'ArrowLeft') {
+    } else if (key === 'ArrowLeft') {
       change(-1);
     }
   }}