mui / mui/base-ui

[dialog][alert dialog] Pass `payload` to `onOpenChange` callback

Open
#4,984 0 comments 0 reactions 0 assignees View on GitHub
component: alert dialog component: dialog has workaround
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.