fix : scroll-lock du MalioDrawer réellement partagé entre instances (drawers empilés)

This commit is contained in:
2026-05-21 16:56:38 +02:00
parent 09059ad0c6
commit 09c814f9f7
2 changed files with 37 additions and 4 deletions

View File

@@ -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('')
})
})

View File

@@ -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,