fix document is undefined when EuiOverlayMask is visible at start

elastic · Dec 1, 2021 · 985633b · 985633b
1 parent 5e322a8
commit 985633b
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
@@ -52,7 +52,7 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
   headerZindexLocation = 'above',
   ...rest
 }) => {
-  const overlayMaskNode = useRef<HTMLDivElement>(document.createElement('div'));
+  const overlayMaskNode = useRef<HTMLDivElement>();
   const [isPortalTargetReady, setIsPortalTargetReady] = useState(false);
 
   useEffect(() => {
@@ -63,10 +63,16 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (typeof document !== undefined) {
+      overlayMaskNode.current = document.createElement('div');
+    }
+  }, []);
+
   useEffect(() => {
     const portalTarget = overlayMaskNode.current;
 
-    if (document !== undefined) {
+    if (typeof document !== undefined && overlayMaskNode.current) {
       document.body.appendChild(overlayMaskNode.current);
     }
 
@@ -87,7 +93,9 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
           `Unhandled property type. EuiOverlayMask property ${key} is not a string.`
         );
       }
-      overlayMaskNode.current.setAttribute(key, rest[key]!);
+      if (overlayMaskNode.current) {
+        overlayMaskNode.current.setAttribute(key, rest[key]!);
+      }
     });
   }, []); // eslint-disable-line react-hooks/exhaustive-deps