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( const startSentinel = useRef(null); const endSentinel = useRef(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( }, []); // 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( 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) { + 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) { const target = evt.target as Node; + evt.stopPropagation(); if ( innerModal.current && !innerModal.current.contains(target) &&