fix(Dialog): honor disableOutsidePointerEvents on modal content (#2677) (#2679)

zernonia · claude · web-flow · commit 5496cced723b · 2026-06-10T14:44:19.000+08:00
`DialogContentModal` hardcoded `:disable-outside-pointer-events="true"`, so a
`disableOutsidePointerEvents` value passed to `DialogContent` was silently
ignored even though the docs list it as a prop.

Pass the prop through with `withDefaults(..., { disableOutsidePointerEvents:
true })` so modal dialogs stay locked by default but can be overridden. Because
`DialogContent` declares the prop as `Boolean`, Vue coerces an absent value to
`false`, which would override the child default; declare an explicit `undefined`
default on `DialogContent` so the absent case propagates as `undefined` and the
child's default applies, while an explicit `false` is still honored.

Note: when a `DialogOverlay` is rendered, its `useBodyScrollLock` locks the
body's `pointer-events` through a separate mechanism; this change only affects
the `DismissableLayer` lock.

Co-authored-by: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/packages/core/src/Dialog/Dialog.test.ts b/packages/core/src/Dialog/Dialog.test.ts
@@ -67,6 +67,68 @@ const NestedContentDialogTest = defineComponent({
 </DialogRoot>`,
 })
 
+// Reproduces https://github.com/unovue/reka-ui/issues/2677 — a modal Dialog
+// hardcoded `disableOutsidePointerEvents` to `true`, so the prop passed to
+// `DialogContent` was ignored. These are tested without a `DialogOverlay`,
+// because the overlay's `useBodyScrollLock` locks `body` pointer-events through
+// a separate mechanism unrelated to this prop.
+function makeModalDialog(contentBinding: string) {
+  return defineComponent({
+    components: { DialogRoot, DialogTrigger, DialogContent, DialogClose, DialogTitle },
+    template: `<DialogRoot>
+  <DialogTrigger>${OPEN_TEXT}</DialogTrigger>
+  <DialogContent ${contentBinding}>
+    <DialogTitle>${TITLE_TEXT}</DialogTitle>
+    <DialogClose>${CLOSE_TEXT}</DialogClose>
+  </DialogContent>
+</DialogRoot>`,
+  })
+}
+
+describe('given a modal Dialog (#2677)', () => {
+  let consoleWarnMock: SpyInstance
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    document.body.style.pointerEvents = ''
+    consoleWarnMock = vi.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    consoleWarnMock.mockRestore()
+  })
+
+  it('should lock body pointer-events by default', async () => {
+    const wrapper = mount(makeModalDialog(''), { attachTo: document.body })
+    fireEvent.click(wrapper.find('button').element)
+    await findByText(document.body, CLOSE_TEXT)
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('none')
+    wrapper.unmount()
+  })
+
+  it('should respect disableOutsidePointerEvents=false on the content', async () => {
+    const wrapper = mount(makeModalDialog(':disable-outside-pointer-events="false"'), { attachTo: document.body })
+    fireEvent.click(wrapper.find('button').element)
+    await findByText(document.body, CLOSE_TEXT)
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).not.toBe('none')
+    wrapper.unmount()
+  })
+
+  it('should still lock body pointer-events when explicitly true', async () => {
+    const wrapper = mount(makeModalDialog(':disable-outside-pointer-events="true"'), { attachTo: document.body })
+    fireEvent.click(wrapper.find('button').element)
+    await findByText(document.body, CLOSE_TEXT)
+    await nextTick()
+
+    expect(document.body.style.pointerEvents).toBe('none')
+    wrapper.unmount()
+  })
+})
+
 describe('given a default Dialog', () => {
   let wrapper: VueWrapper<InstanceType<typeof DialogTest>>
   let trigger: DOMWrapper<HTMLElement>
diff --git a/packages/core/src/Dialog/DialogContent.vue b/packages/core/src/Dialog/DialogContent.vue
@@ -22,7 +22,13 @@ import DialogContentModal from './DialogContentModal.vue'
 import DialogContentNonModal from './DialogContentNonModal.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentProps>()
+const props = withDefaults(defineProps<DialogContentProps>(), {
+  // Keep `undefined` (instead of Vue's boolean coercion to `false`) so the
+  // modal/non-modal child can apply its own default. This lets a modal
+  // `DialogContent` stay locked by default while still honoring an explicit
+  // `:disable-outside-pointer-events="false"` (#2677).
+  disableOutsidePointerEvents: undefined,
+})
 const emits = defineEmits<DialogContentEmits>()
 
 const rootContext = injectDialogRootContext()
diff --git a/packages/core/src/Dialog/DialogContentModal.vue b/packages/core/src/Dialog/DialogContentModal.vue
@@ -4,7 +4,9 @@ import { useEmitAsProps, useForwardExpose, useHideOthers } from '@/shared'
 import DialogContentImpl from './DialogContentImpl.vue'
 import { injectDialogRootContext } from './DialogRoot.vue'
 
-const props = defineProps<DialogContentImplProps>()
+const props = withDefaults(defineProps<DialogContentImplProps>(), {
+  disableOutsidePointerEvents: true,
+})
 const emits = defineEmits<DialogContentImplEmits>()
 
 const rootContext = injectDialogRootContext()
@@ -20,7 +22,7 @@ useHideOthers(currentElement)
     v-bind="{ ...props, ...emitsAsProps }"
     :ref="forwardRef"
     :trap-focus="rootContext.open.value"
-    :disable-outside-pointer-events="true"
+    :disable-outside-pointer-events="props.disableOutsidePointerEvents"
     @close-auto-focus="
       (event) => {
         if (!event.defaultPrevented) {
