fix: modal generate a new portal context (#510)

* fix: modal generate a new portal context * fix: click misdetected on chrome
zakodium-oss · Jun 22, 2023 · 01edd09 · 01edd09
1 parent 7dee260
commit 01edd09
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 52 deletions.
diff --git a/src/components/hooks/useOnClickOutside.ts b/src/components/hooks/useOnClickOutside.ts
@@ -19,6 +19,8 @@ export function useOnClickOutside<T extends Node = Node>(
       handler(event);
     };
 
+    if (shadowElement === null) return;
+
     shadowElement.addEventListener('mousedown', listener);
     shadowElement.addEventListener('touchstart', listener);
 

diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
@@ -1,8 +1,10 @@
 import styled from '@emotion/styled';
 import type { ReactNode } from 'react';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 
 import { Button } from '..';
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 
 import { useDialog } from './useDialog';
 
@@ -57,6 +59,8 @@ const ConfirmModalFooter = styled.div`
   gap: 10px;
 `;
 
+type MaybeHTMLDialogElement = HTMLDialogElement | null;
+
 export function ConfirmModal(props: ConfirmModalProps) {
   const {
     isOpen,
@@ -72,48 +76,62 @@ export function ConfirmModal(props: ConfirmModalProps) {
     children,
   } = props;
 
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const dialogProps = useDialog({
+    dialogRef,
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
     onRequestClose,
   });
+  const [portalDomNode, setPortalDomNode] =
+    useState<MaybeHTMLDialogElement>(null);
+  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
+    setPortalDomNode(node);
+  }, []);
+
+  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
+    dialogCallbackRef,
+    () => dialogRef.current,
+  );
 
   if (!isOpen) {
     return null;
   }
 
   return (
     <Portal>
-      <ConfirmModalDialog {...dialogProps}>
-        <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
-          <ConfirmModalChildrenRoot headerColor={headerColor}>
-            {children}
-          </ConfirmModalChildrenRoot>
+      <ConfirmModalDialog {...dialogProps} ref={dialogRef}>
+        <RootLayoutProvider innerRef={portalDomNode}>
+          <ConfirmModalContents headerColor={headerColor} style={{ maxWidth }}>
+            <ConfirmModalChildrenRoot headerColor={headerColor}>
+              {children}
+            </ConfirmModalChildrenRoot>
 
-          <ConfirmModalFooter>
-            <Button
-              onClick={onConfirm}
-              backgroundColor={{
-                basic: 'hsla(243deg, 75%, 58%, 1)',
-                hover: 'hsla(245deg, 58%, 50%, 1)',
-              }}
-              color={{ basic: 'white' }}
-            >
-              {saveText}
-            </Button>
-            <Button
-              onClick={onCancel}
-              backgroundColor={{
-                basic: 'hsla(0deg, 72%, 50%, 1)',
-                hover: 'hsla(0deg, 73%, 42%, 1)',
-              }}
-              color={{ basic: 'white' }}
-            >
-              {cancelText}
-            </Button>
-          </ConfirmModalFooter>
-        </ConfirmModalContents>
+            <ConfirmModalFooter>
+              <Button
+                onClick={onConfirm}
+                backgroundColor={{
+                  basic: 'hsla(243deg, 75%, 58%, 1)',
+                  hover: 'hsla(245deg, 58%, 50%, 1)',
+                }}
+                color={{ basic: 'white' }}
+              >
+                {saveText}
+              </Button>
+              <Button
+                onClick={onCancel}
+                backgroundColor={{
+                  basic: 'hsla(0deg, 72%, 50%, 1)',
+                  hover: 'hsla(0deg, 73%, 42%, 1)',
+                }}
+                color={{ basic: 'white' }}
+              >
+                {cancelText}
+              </Button>
+            </ConfirmModalFooter>
+          </ConfirmModalContents>
+        </RootLayoutProvider>
       </ConfirmModalDialog>
     </Portal>
   );

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -1,7 +1,9 @@
 import styled from '@emotion/styled';
 import type { ReactElement, ReactNode } from 'react';
+import { useCallback, useImperativeHandle, useRef, useState } from 'react';
 
 import { Portal } from '../root-layout/Portal';
+import { RootLayoutProvider } from '../root-layout/RootLayoutContext';
 
 import ModalCloseButton from './ModalCloseButton';
 import { useDialog } from './useDialog';
@@ -56,6 +58,8 @@ const ModalFooterStyled = styled.div`
   padding: 10px 20px 10px 20px;
 `;
 
+type MaybeHTMLDialogElement = HTMLDialogElement | null;
+
 export function Modal(props: ModalProps) {
   const {
     isOpen,
@@ -69,30 +73,44 @@ export function Modal(props: ModalProps) {
     height,
   } = props;
 
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const dialogProps = useDialog({
+    dialogRef,
     isOpen,
     requestCloseOnEsc,
     requestCloseOnBackdrop,
     onRequestClose,
   });
+  const [portalDomNode, setPortalDomNode] =
+    useState<MaybeHTMLDialogElement>(null);
+  const dialogCallbackRef = useCallback((node: MaybeHTMLDialogElement) => {
+    setPortalDomNode(node);
+  }, []);
+
+  useImperativeHandle<MaybeHTMLDialogElement, MaybeHTMLDialogElement>(
+    dialogCallbackRef,
+    () => dialogRef.current,
+  );
 
   if (!isOpen) {
     return null;
   }
 
   return (
     <Portal>
-      <DialogRoot {...dialogProps}>
-        <DialogContents
-          style={{
-            maxWidth,
-            height: height || 'max-content',
-            width: width || '100%',
-          }}
-        >
-          {children}
-          {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
-        </DialogContents>
+      <DialogRoot {...dialogProps} ref={dialogRef}>
+        <RootLayoutProvider innerRef={portalDomNode}>
+          <DialogContents
+            style={{
+              maxWidth,
+              height: height || 'max-content',
+              width: width || '100%',
+            }}
+          >
+            {children}
+            {hasCloseButton && <ModalCloseButton onClick={onRequestClose} />}
+          </DialogContents>
+        </RootLayoutProvider>
       </DialogRoot>
     </Portal>
   );

diff --git a/src/components/modal/useDialog.ts b/src/components/modal/useDialog.ts
@@ -1,34 +1,34 @@
 import {
   MouseEventHandler,
   ReactEventHandler,
+  RefObject,
   useCallback,
   useEffect,
-  useRef,
 } from 'react';
 import { useKbsDisableGlobal } from 'react-kbs';
 
 export function useDialog({
+  dialogRef,
   isOpen,
   requestCloseOnEsc,
   requestCloseOnBackdrop,
   onRequestClose,
 }: {
+  dialogRef: RefObject<HTMLDialogElement>;
   isOpen: boolean;
   requestCloseOnEsc: boolean;
   requestCloseOnBackdrop: boolean;
   onRequestClose?: () => void;
 }) {
   useKbsDisableGlobal(isOpen);
 
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
   useEffect(() => {
     const dialog = dialogRef.current;
     if (dialog && isOpen) {
       dialog.showModal();
       return () => dialog.close();
     }
-  }, [isOpen]);
+  }, [dialogRef, isOpen]);
 
   const onCancel = useCallback<ReactEventHandler<HTMLDialogElement>>(
     (event) => {
@@ -42,15 +42,28 @@ export function useDialog({
 
   const onClick = useCallback<MouseEventHandler<HTMLDialogElement>>(
     (event) => {
+      const dialog = dialogRef.current;
+      if (!dialog) {
+        return;
+      }
+
+      // Ref: https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop
+      const rect = dialog.getBoundingClientRect();
+      const isInDialog =
+        rect.top <= event.clientY &&
+        event.clientY <= rect.top + rect.height &&
+        rect.left <= event.clientX &&
+        event.clientX <= rect.left + rect.width;
+
       event.stopPropagation();
       // Since the dialog has no size of itself, this condition is only
       // `true` when we click on the backdrop.
-      if (event.target === event.currentTarget && requestCloseOnBackdrop) {
+      if (!isInDialog && requestCloseOnBackdrop) {
         onRequestClose?.();
       }
     },
-    [requestCloseOnBackdrop, onRequestClose],
+    [dialogRef, requestCloseOnBackdrop, onRequestClose],
   );
 
-  return { ref: dialogRef, onClick, onCancel };
+  return { onClick, onCancel };
 }
diff --git a/src/components/root-layout/Portal.tsx b/src/components/root-layout/Portal.tsx
@@ -9,5 +9,8 @@ interface PortalProps {
 
 export function Portal(props: PortalProps) {
   const element = useRootLayoutContext();
+  if (element === null) {
+    return null;
+  }
   return createPortal(props.children, element);
 }
diff --git a/src/components/root-layout/RootLayoutContext.tsx b/src/components/root-layout/RootLayoutContext.tsx
@@ -1,13 +1,14 @@
 import { createContext, ReactNode, useContext } from 'react';
 
-const rootLayoutContext = createContext<HTMLElement | null>(null);
+const defaultPortalContext =
+  typeof document === 'undefined' ? null : document.body;
+
+const rootLayoutContext = createContext<HTMLElement | null>(
+  defaultPortalContext,
+);
 
 export function useRootLayoutContext() {
   const context = useContext(rootLayoutContext);
-  if (!context) {
-    throw new Error('RootLayoutContext was not found');
-  }
-
   return context;
 }
 

diff --git a/stories/components/select.stories.tsx b/stories/components/select.stories.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Button } from '../../src/components';
+import { Button, Modal, useOnOff } from '../../src/components';
 import { Select } from '../../src/components/forms/Select';
 
 export default {
@@ -300,3 +300,44 @@ export function ResetButton() {
     </div>
   );
 }
+
+export function InModal() {
+  const [isOpen, open, close] = useOnOff();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  return (
+    <>
+      <Button
+        onClick={open}
+        backgroundColor={{
+          basic: 'hsla(243deg, 75%, 58%, 1)',
+          hover: 'hsla(245deg, 58%, 50%, 1)',
+        }}
+        color={{ basic: 'white' }}
+      >
+        Open
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        onRequestClose={() => {
+          close();
+        }}
+      >
+        <Modal.Header>Select a fruit</Modal.Header>
+        <Modal.Body>
+          <p>Hello, world!</p>
+          <Select
+            value={value}
+            onSelect={setValue}
+            options={[
+              [
+                { label: 'Apple', value: 'apple' },
+                { label: 'Banana', value: 'banana' },
+                { label: 'Orange', value: 'orange' },
+              ],
+            ]}
+          />
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+}