[Bug] Body scroll lock is removed when opening nested modals #159
Description
Environment Details
- PHP Version: 8.2
- Laravel Version: 12.33.0
- Vue Version: 3.5.13
- Inertia.js Version: 2.1.0
- Inertia Modal Version: 1.0.0-beta.4
- Reka UI Version: 2.4.1
Bug Report
Description
When opening a nested modal (a modal inside another modal), the body scroll lock is removed, making the background page scrollable. The scroll lock is re-applied only when the nested modal closes.
Steps To Reproduce
- Open a modal using
<ModalLink>orvisitModal() - Inspect the
<body>element in DevTools - it should haveoverflow: hidden,padding-right: 17px, andmargin-right: 0px - From inside the first modal, open a second modal (nested modal)
- Inspect the
<body>element again - all scroll lock styles are removed - Try scrolling the background page - it's now scrollable (should be locked)
- Close the nested modal
- Body scroll lock is re-applied
Live reproduction: https://github.com/empresarrollo/modal-bug
Grabacion.de.pantalla.2025-10-08.183724.mp4
Expected Behavior
The body element should maintain scroll lock styles (overflow: hidden, padding-right, margin-right) while any modal is open, regardless of nesting depth.
Actual Behavior
Opening a nested modal removes all body scroll lock styles, allowing the background page to scroll. Styles are only re-applied when the nested modal closes and the first modal becomes active again.
Root Cause ?
In vendor/inertiaui/modal/vue/src/Modal.vue (lines 102-119) I thiiiink that the component only renders <DialogOverlay> for the first modal when onTopOfStack and a simple div for the nested modals, and when the DialogOverlay is not present, Reka UI useBodyScrollLock is not used
<Transition v-if="index === 0 && onTopOfStack" ...>
<DialogOverlay class="im-backdrop ..." />
</Transition>
<div v-if="index > 0 && onTopOfStack" class="im-backdrop ..." />