From e5315474975de52f9c3589612379900110fc2f3d Mon Sep 17 00:00:00 2001
From: Ashelyn Dawn <git@tempest.dev>
Date: Tue, 6 Jul 2021 22:37:54 -0600
Subject: [PATCH] Fix inconsistent modal portal ID

---
 components/modal/modal.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/modal/modal.js b/components/modal/modal.js
index b7925e0..e9c80d4 100644
--- a/components/modal/modal.js
+++ b/components/modal/modal.js
@@ -5,15 +5,17 @@ import FocusTrap from 'focus-trap-react'
 
 import styles from './modal.module.css'
 
+const PORTAL_ID = '__sos_modal';
+
 export default function Modal({visible, title, children, onDeactivate}){
   const [portalExists, setPortalExists] = useState(false);
 
   useEffect(() => {
-    const portalExists = !!document.querySelector('#sos-modal');
+    const portalExists = !!document.querySelector(`#${PORTAL_ID}`);
 
     if (!portalExists) {
       const portal = document.createElement('div');
-      portal.id = '#sos-modal';
+      portal.id = PORTAL_ID;
       document.body.appendChild(portal);
     }
 
@@ -43,5 +45,5 @@ export default function Modal({visible, title, children, onDeactivate}){
         </FocusTrap>
       )}
     </div>
-  ), window.document.body)
+  ), document.querySelector(`#${PORTAL_ID}`))
 }