fix : scroll-lock du MalioDrawer réellement partagé entre instances (drawers empilés)
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { afterEach, describe, expect, it } from 'vitest'
|
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 type { DefineComponent } from 'vue'
|
||||||
import { Icon as IconifyIcon } from '@iconify/vue'
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
||||||
import Drawer from './Drawer.vue'
|
import Drawer from './Drawer.vue'
|
||||||
@@ -30,6 +30,8 @@ function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>)
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe('MalioDrawer', () => {
|
describe('MalioDrawer', () => {
|
||||||
|
enableAutoUnmount(afterEach)
|
||||||
|
|
||||||
afterEach(() => {
|
afterEach(() => {
|
||||||
document.body.style.overflow = ''
|
document.body.style.overflow = ''
|
||||||
})
|
})
|
||||||
@@ -307,4 +309,33 @@ describe('MalioDrawer', () => {
|
|||||||
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
expect(document.activeElement).toBe(wrapper.find('[data-test="btn2"]').element)
|
||||||
wrapper.unmount()
|
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('')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -95,9 +95,6 @@ import { twMerge } from 'tailwind-merge'
|
|||||||
|
|
||||||
defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
|
defineOptions({ name: 'MalioDrawer', inheritAttrs: false })
|
||||||
|
|
||||||
// Module-level counter shared across all drawer instances to support stacked drawers.
|
|
||||||
let openDrawerCount = 0
|
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
id?: string
|
id?: string
|
||||||
@@ -257,6 +254,11 @@ function close() {
|
|||||||
}
|
}
|
||||||
</script>
|
</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>
|
<style scoped>
|
||||||
.drawer-right-enter-active,
|
.drawer-right-enter-active,
|
||||||
.drawer-right-leave-active,
|
.drawer-right-leave-active,
|
||||||
|
|||||||
Reference in New Issue
Block a user