From 688a183b585e47533235bd911daa48f31133ee0a Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Thu, 22 Feb 2024 11:27:16 -0600
Subject: [PATCH] feat: Nest modal support (#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 <tay1orjones@users.noreply.github.com>
---
 packages/react/src/components/ComposedModal/ComposedModal.tsx | 4 +++-
 packages/react/src/components/Modal/Modal.tsx                 | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index 9587badedea3..883e6eb15601 100644
--- 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,6 +259,7 @@ 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);
       }
@@ -266,6 +267,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
       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
index 028d2ddac1b1..8496ed0373b3 100644
--- 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) &&