Modal disableScrollLock behavior with nested Modals

Direct Answer

No, disableScrollLock on an outer Modal does not influence a nested child Modal. Each Modal instance manages scroll locking independently via its own useEffect. There is no documented API in MUI v5/v6 to coordinate scroll lock state across a Modal stack.

Confirmed Behavior

• Independent management: A parent with disableScrollLock={true} and a child with the default false will still result in the child locking document.body.style.overflow to "hidden" when it mounts.
• Mount-order wins: The last-mounted Modal's effect runs last and overwrites body.style.overflow. This makes the final state non-deterministic when conditional rendering or portal order changes.
• Premature restoration: If the outer Modal locks (default) and the inner has disableScrollLock={true}, the inner's cleanup on unmount may restore scroll while the outer remains open.
• Shared global counter: MUI's internal logic uses a global element count; mixed disableScrollLock values create race conditions on the single body style.

Practical Workaround

Lift scroll lock control to a common ancestor and manage it with a reference counter:

function useModalStackLock() {
  const count = React.useRef(0);
  const lock = React.useCallback(() => {
    if (++count.current === 1) document.body.style.overflow = 'hidden';
  }, []);
  const unlock = React.useCallback(() => {
    if (--count.current === 0) document.body.style.overflow = '';
  }, []);
  return { lock, unlock };
}

// In a wrapper component that renders the Modal stack:
const { lock, unlock } = useModalStackLock();

<Modal open={outerOpen} disableScrollLock onOpen={lock} onClose={unlock}>
  <Modal open={innerOpen} disableScrollLock>...</Modal>
</Modal>

Pass disableScrollLock={true} to every Modal in the stack and let the hook drive body.overflow based on the number of currently open Modals.

Verification Steps

1. Create a minimal reproduction with two nested Modals.
2. Toggle disableScrollLock combinations (parent/child true/false).
3. Inspect document.body.style.overflow in DevTools after each mount/unmount.
4. Add console.log in a custom useEffect inside each Modal to track when lock is applied/removed.
5. Confirm the MUI version in package.json; the hooks-based implementation differs from v4.

One Diagnostic Detail Needed

What MUI version are you using? The scroll lock implementation changed between v4 (class-based) and v5+ (hooks-based), and the exact race-condition behavior can vary by minor version.