app/components/malio/drawer/Drawer.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
 import type { DefineComponent } from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import Drawer from './Drawer.vue'
@@ -30,6 +30,8 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
 }
 
 describe('MalioDrawer', () => {
+  enableAutoUnmount(afterEach)
+
   afterEach(() => {
     document.body.style.overflow = ''
   })
@@ -307,4 +309,33 @@ describe('MalioDrawer', () => {
     expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
     wrapper.unmount()
   })
+
+  it('does not release body scroll-lock when one stacked drawer closes while another is still open', async () => {
+    const wrapperA = mount(DrawerForTest, {
+      props: { modelValue: false },
+      attachTo: document.body,
+      global: { stubs: { Teleport: true } },
+    })
+    const wrapperB = mount(DrawerForTest, {
+      props: { modelValue: false },
+      attachTo: document.body,
+      global: { stubs: { Teleport: true } },
+    })
+
+    // Open drawer A → scroll locked
+    await wrapperA.setProps({ modelValue: true })
+    expect(document.body.style.overflow).toBe('hidden')
+
+    // Open drawer B → still locked
+    await wrapperB.setProps({ modelValue: true })
+    expect(document.body.style.overflow).toBe('hidden')
+
+    // Close drawer B → A is still open, scroll must remain locked
+    await wrapperB.setProps({ modelValue: false })
+    expect(document.body.style.overflow).toBe('hidden')
+
+    // Close drawer A → both closed, scroll-lock released
+    await wrapperA.setProps({ modelValue: false })
+    expect(document.body.style.overflow).toBe('')
+  })
 })

app/components/malio/drawer/Drawer.vue

@@ -95,9 +95,6 @@ import { twMerge } from 'tailwind-merge'
 
 defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
 
-// Module-level counter shared across all drawer instances to support stacked drawers.
-let openDrawerCount = 0
-
 const props = withDefaults(
   defineProps<{
     id?: string
@@ -257,6 +254,11 @@ function close() {
 }
 </script>
 
+<script lang="ts">
+// Shared across all MalioDrawer instances: only the last open drawer releases the body scroll-lock.
+let openDrawerCount = 0
+</script>
+
 <style scoped>
 .drawer-right-enter-active,
 .drawer-right-leave-active,