Skip to content

Commit

Permalink
Add support for noIsolation option from react-remove-scroll
Browse files Browse the repository at this point in the history
When rendering inside a shadow DOM container, this fixes scroll wheel functionality. Without this option, scroll wheel events are captured and don't work.
  • Loading branch information
michaelchart committed Nov 18, 2022
1 parent 43f450d commit 3740a5c
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions packages/dialog/src/reach-dialog.tsx
Expand Up @@ -116,6 +116,7 @@ const DialogInner = React.forwardRef(function DialogInner(
onKeyDown,
onMouseDown,
unstable_lockFocusAcrossFrames,
disableEventCapturing,
...props
},
forwardedRef
Expand Down Expand Up @@ -188,6 +189,7 @@ const DialogInner = React.forwardRef(function DialogInner(
? !dangerouslyBypassScrollLock
: isOpen
}
noIsolation={disableEventCapturing}
>
<Comp
{...props}
Expand Down Expand Up @@ -429,6 +431,16 @@ interface DialogProps {
* @deprecated
*/
unstable_lockFocusAcrossFrames?: boolean;

/**
* By default, when the dialog is open, outer events are captured (see
* `noIsolation` option in react-remove-scroll:
* https://github.com/theKashey/react-remove-scroll#usage). Event capturing
* is React friendly and unlikely be a problem. But if you are rendering
* inside a shadow DOM container, you may want to disable event capturing.
*
*/
disableEventCapturing?: boolean;
}

Dialog.displayName = "Dialog";
Expand Down

0 comments on commit 3740a5c

Please sign in to comment.