diff --git a/README.md b/README.md index 93fec0a2..40920efb 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,7 @@ ReactDOM.render( | closeIcon | ReactNode | | specific the close icon. | | | forceRender | Boolean | false | Create dialog dom node before dialog first show | | | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | | +| scrollLock | Boolean | true | Control whether to lock body scroll when dialog opens | | | modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 | ## Development diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx index c9d366ab..76563968 100644 --- a/src/DialogWrap.tsx +++ b/src/DialogWrap.tsx @@ -23,8 +23,10 @@ const DialogWrap: React.FC = (props) => { closable, panelRef, keyboard = true, + scrollLock = true, onClose, } = props; + const { scrollLock: _, ...restProps } = props; const [animatedVisible, setAnimatedVisible] = React.useState(visible); const refContext = React.useMemo(() => ({ panel: panelRef }), [panelRef]); @@ -55,10 +57,10 @@ const DialogWrap: React.FC = (props) => { onEsc={onEsc} autoDestroy={false} getContainer={getContainer} - autoLock={visible || animatedVisible} + autoLock={scrollLock && (visible || animatedVisible)} > { const closableObj = closable && typeof closable === 'object' ? closable : {}; diff --git a/src/IDialogPropTypes.ts b/src/IDialogPropTypes.ts index 4ab00b5b..03531715 100644 --- a/src/IDialogPropTypes.ts +++ b/src/IDialogPropTypes.ts @@ -59,6 +59,8 @@ export type IDialogPropTypes = { // https://github.com/react-component/dialog/issues/95 focusTriggerAfterClose?: boolean; focusTrap?: boolean; + /** Control whether to lock body scroll when modal opens. Default is true. */ + scrollLock?: boolean; // Refs panelRef?: React.Ref; diff --git a/tests/scroll.spec.tsx b/tests/scroll.spec.tsx index 6f4a3aa0..8cbfa19d 100644 --- a/tests/scroll.spec.tsx +++ b/tests/scroll.spec.tsx @@ -78,4 +78,23 @@ describe('Dialog.Scroll', () => { unmount(); }); + + it('should not lock body scroll when scrollLock is false', () => { + const { unmount } = render(); + + // body should not have overflow:hidden when scrollLock is false + expect(document.body).not.toHaveStyle({ + overflowY: 'hidden', + }); + + unmount(); + }); + + it('should lock body scroll when scrollLock is true (default)', () => { + const { unmount } = render(); + expect(document.body).toHaveStyle({ + overflowY: 'hidden', + }); + unmount(); + }); });