From 3f03a1c259c3ec3ac30db55b17b14fcc30a95a8d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 25 Dec 2019 07:19:51 -0800
Subject: [PATCH] refactor(composed-modal): use onMount, afterUpdate methods

---
 .../ComposedModal/ComposedModal.svelte        | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/ComposedModal/ComposedModal.svelte b/src/components/ComposedModal/ComposedModal.svelte
index ad30981e..61caa9bf 100644
--- a/src/components/ComposedModal/ComposedModal.svelte
+++ b/src/components/ComposedModal/ComposedModal.svelte
@@ -8,7 +8,7 @@
   export let size = undefined;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext, onDestroy } from 'svelte';
+  import { createEventDispatcher, tick, setContext, onMount, afterUpdate } from 'svelte';
   import { writable } from 'svelte/store';
   import { cx } from '../../lib';
 
@@ -30,10 +30,6 @@
     }
   });
 
-  onDestroy(() => {
-    document.body.classList.remove(cx('--body--with-modal-open'));
-  });
-
   function focus(element) {
     if (element.querySelector(selectorPrimaryFocus)) {
       return focusElement.focus();
@@ -44,10 +40,18 @@
     }
   }
 
-  $: didOpen = open;
-  $: {
-    if (innerModal) {
-      focus(innerModal);
+  onMount(async () => {
+    await tick();
+    focus(innerModal);
+
+    return () => {
+      document.body.classList.remove(cx('--body--with-modal-open'));
+    };
+  });
+
+  afterUpdate(() => {
+    if (!didOpen) {
+      focus(outerModal);
     }
 
     if (open) {
@@ -56,7 +60,9 @@
       dispatch('close');
       document.body.classList.remove(cx('--body--with-modal-open'));
     }
-  }
+  });
+
+  $: didOpen = open;
 </script>
 
 <div
@@ -76,7 +82,6 @@
   on:transitionend
   on:transitionend={() => {
     if (didOpen) {
-      focus(outerModal);
       didOpen = false;
     }
   }}