From 4e03acc944a1b643bce7e6782182c2ff5cffb15c Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Fri, 5 Feb 2021 15:52:47 -0800
Subject: [PATCH] fix(web): ensure drawer can slide in/out and not just appear

---
 web/src/components/NavigationDrawer.jsx | 9 +++++----
 web/src/components/RelativeModal.jsx    | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/NavigationDrawer.jsx b/web/src/components/NavigationDrawer.jsx
index 768b8db71..74e88df09 100644
--- a/web/src/components/NavigationDrawer.jsx
+++ b/web/src/components/NavigationDrawer.jsx
@@ -12,11 +12,12 @@ export default function NavigationDrawer({ children, header }) {
 
   return (
     <Fragment>
-      {showDrawer ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
+      {showDrawer ? <div key="scrim" className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
       <div
-        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
-          !showDrawer ? '-translate-x-full' : ''
-        } lg:translate-x-0 transition-transform duration-300`}
+        key="drawer"
+        className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform ${
+          !showDrawer ? '-translate-x-full lg:translate-x-0' : 'translate-x-0'
+        } transition-transform duration-300`}
         onClick={handleDismiss}
       >
         {header ? (
diff --git a/web/src/components/RelativeModal.jsx b/web/src/components/RelativeModal.jsx
index c1ce43fe9..4f7e5242e 100644
--- a/web/src/components/RelativeModal.jsx
+++ b/web/src/components/RelativeModal.jsx
@@ -82,8 +82,9 @@ export default function RelativeModal({ className, role = 'dialog', children, on
 
   const menu = (
     <Fragment>
-      <div className="absolute inset-0 z-10" onClick={handleDismiss} />
+      <div key="scrim" className="absolute inset-0 z-10" onClick={handleDismiss} />
       <div
+        key="menu"
         className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}