feat: Nest modal support (carbon-design-system#14320)

* feat: nested modal support * fix: revert portal change * fix: revert modal background change and add escape * fix: reorder props * fix: add prevent default * fix: remove nested modal story * fix: revert additional changes to modal story code * fix: stopPropagation not preventDefault --------- Co-authored-by: Taylor Jones <[email protected]>
huzaifabhutta · Feb 27, 2024 · d3d69cf · d3d69cf
1 parent 5917f15
commit d3d69cf
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -242,7 +242,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     const startSentinel = useRef<HTMLButtonElement>(null);
     const endSentinel = useRef<HTMLButtonElement>(null);
 
-    // Kepp track of modal open/close state
+    // Keep track of modal open/close state
     // and propagate it to the document.body
     useEffect(() => {
       if (open !== wasOpen) {
@@ -259,13 +259,15 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     function handleKeyDown(evt: KeyboardEvent) {
+      evt.stopPropagation();
       if (match(evt, keys.Escape)) {
         closeModal(evt);
       }
 
       onKeyDown?.(evt);
     }
     function handleMousedown(evt: MouseEvent) {
+      evt.stopPropagation();
       const isInside = innerModal.current?.contains(evt.target as Node);
       if (!isInside && !preventCloseOnClickOutside) {
         closeModal(evt);

diff --git a/packages/react/src/components/Modal/Modal.tsx b/packages/react/src/components/Modal/Modal.tsx
@@ -279,6 +279,7 @@ const Modal = React.forwardRef(function Modal(
   }
 
   function handleKeyDown(evt: React.KeyboardEvent<HTMLDivElement>) {
+    evt.stopPropagation();
     if (open) {
       if (match(evt, keys.Escape)) {
         onRequestClose(evt);
@@ -295,6 +296,7 @@ const Modal = React.forwardRef(function Modal(
 
   function handleMousedown(evt: React.MouseEvent<HTMLDivElement>) {
     const target = evt.target as Node;
+    evt.stopPropagation();
     if (
       innerModal.current &&
       !innerModal.current.contains(target) &&