From 9f537777d441375ae3c8ec69772e6f3502a58111 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 11 Jan 2021 08:09:05 -0500
Subject: [PATCH] Use transitionend instead of a timeout

---
 src/components/dialog/dialog.tsx | 16 ++++++++++------
 src/components/drawer/drawer.tsx | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 2901dc948..68bb5ff4d 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -147,12 +147,16 @@ export class Dialog {
         // Fiddle: https://jsfiddle.net/g6buoafq/1/
         // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
         //
-        setTimeout(() => {
-          const slInitialFocus = this.slInitialFocus.emit();
-          if (!slInitialFocus.defaultPrevented) {
-            this.panel.focus();
-          }
-        }, 250);
+        this.dialog.addEventListener(
+          'transitionend',
+          () => {
+            const slInitialFocus = this.slInitialFocus.emit();
+            if (!slInitialFocus.defaultPrevented) {
+              this.panel.focus();
+            }
+          },
+          { once: true }
+        );
       }
     }
   }
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 97249eef8..61d724039 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -158,12 +158,16 @@ export class Drawer {
         // Fiddle: https://jsfiddle.net/g6buoafq/1/
         // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
         //
-        setTimeout(() => {
-          const slInitialFocus = this.slInitialFocus.emit();
-          if (!slInitialFocus.defaultPrevented) {
-            this.panel.focus();
-          }
-        }, 250);
+        this.drawer.addEventListener(
+          'transitionend',
+          () => {
+            const slInitialFocus = this.slInitialFocus.emit();
+            if (!slInitialFocus.defaultPrevented) {
+              this.panel.focus();
+            }
+          },
+          { once: true }
+        );
       }
     }
   }