[dialog][alert dialog] Pass `payload` to `onOpenChange` callback
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
Pass `payload` to the `onOpenChange` callback of `Dialog.Root` and `AlertDialog.Root`:
```tsx
{
if (!open && eventDetails.reason === 'escape-key') {
payload?.onCancel()
}
}}
>
```
## Workaround
Access `payload` via the internal `store` property of `Dialog.Handle`:
```tsx
{
if (!open && eventDetails.reason === 'escape-key') {
const { payload } = dialogHandle.store.getSnapshot()
payload?.onCancel()
}
}}
>
```
## Motivation
I want the ability to trigger payload-specific side effects on open change. For example, triggering an `onCancel` effect on ESC. This would be helpful for integrating with [`useBlocker` from Tanstack Router](https://tanstack.com/router/v1/docs/guide/navigation-blocking#hooklogical-based-custom-ui-without-resolver):
```tsx
import { useBlocker } from '@tanstack/react-router'
import { useState } from 'react'
import { exitConfirmationDialogHandle } from './exit-confirmation-dialog'
function MyComponent() {
const [formIsDirty, setFormIsDirty] = useState(false)
useBlocker({
shouldBlockFn: () => {
if (!formIsDirty) {
return false
}
const shouldBlock = new Promise((resolve) => {
exitConfirmationDialogHandle.openWithPayload({
title: 'Discard unsaved changes?',
onConfirm: () => {
exitConfirmationDialogHandle.close()
resolve(false)
},
onCancel: () => {
exitConfirmationDialogHandle.close()
resolve(true)
},
})
})
return shouldBlock
},
})
// ...
}
```
Contributor guide
Assessment
This issue has not been assessed yet.