fix(AlertDialog): preserve pointer events lock (#2692)

Perdolique · web-flow · commit fa5cf0e3c3e5 · 2026-06-16T12:44:09.000+08:00
- 🐛 Keep absent disableOutsidePointerEvents undefined when AlertDialogContent forwards props
- ✅ Add coverage for interactive alert dialog content while body is locked
diff --git a/packages/core/src/AlertDialog/AlertDialog.test.ts b/packages/core/src/AlertDialog/AlertDialog.test.ts
@@ -1,7 +1,7 @@
 import type { VueWrapper } from '@vue/test-utils'
-import { findAllByText, findByText, fireEvent } from '@testing-library/vue'
+import { findAllByText, findByRole, findByText, fireEvent } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { axe } from 'vitest-axe'
 import { nextTick } from 'vue'
 import AlertDialog from './story/_AlertDialog.vue'
@@ -15,6 +15,12 @@ describe('given a default Dialog', async () => {
     trigger = await findByText(wrapper.element as HTMLElement, 'Open')
   })
 
+  afterEach(() => {
+    wrapper.unmount()
+    document.body.innerHTML = ''
+    document.body.style.cssText = ''
+  })
+
   it('should pass axe accessibility tests', async () => {
     expect(await axe(document.body)).toHaveNoViolations()
 
@@ -37,5 +43,12 @@ describe('given a default Dialog', async () => {
       const cancelButton = await findAllByText(document.body, 'Cancel')
       expect(cancelButton.at(-1)).toBe(document.activeElement)
     })
+
+    it('should keep content interactive while body pointer events are locked', async () => {
+      const content = await findByRole(document.body, 'alertdialog')
+
+      expect(document.body.style.pointerEvents).toBe('none')
+      expect(content.style.pointerEvents).toBe('auto')
+    })
   })
 })
diff --git a/packages/core/src/AlertDialog/AlertDialogContent.vue b/packages/core/src/AlertDialog/AlertDialogContent.vue
@@ -20,7 +20,12 @@ export interface AlertDialogContentProps extends DialogContentProps {}
 import { nextTick, ref } from 'vue'
 import { DialogContent } from '@/Dialog'
 
-const props = defineProps<AlertDialogContentProps>()
+const props = withDefaults(defineProps<AlertDialogContentProps>(), {
+  // Keep `undefined` (instead of Vue's boolean coercion to `false`) so
+  // DialogContent can preserve the modal default while still honoring an
+  // explicit `:disable-outside-pointer-events="false"`.
+  disableOutsidePointerEvents: undefined,
+})
 const emits = defineEmits<AlertDialogContentEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
