Repository: ui
Issue: [bug]: The Dialog closes automatically after the async call if it is in the DataTable.
Labels: bug

### Describe the bug

The Dialog closes after asynchronous function in the DataTable.
I think after `onDelete`, the dialog still opens.
But it closes.

### Affected component/components

Dialog, DataTabe

### How to reproduce

```tsx
// app/posts/page.tsx
'use client';

import {
  useMutation as useTanstackMutation,
  useQuery as useTanstackQuery,
} from '@tanstack/react-query';
import axios from 'axios';
import DataTable from '@/components/DataTable';
import ConfirmWithInputDialog from '@/components/ConfirmWithInputDialog';
import { Button } from '@/components/ui/button';

export default function PostsPage() {
  const { data, refetch } = useTanstackQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
      return res?.data;
    },
  });

  const mutation = useTanstackMutation({
    mutationFn: (id: string) => {
      return axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
    },
  });

  async function onDelete(id: string) {
    console.log('id', id);
    await mutation.mutateAsync(id);
    refetch();
  }

  const columns = [
    {
      accessorKey: 'id',
      header: 'ID',
    },
    {
      accessorKey: 'userId',
      header: 'User Id',
    },
    {
      accessorKey: 'title',
      header: 'Title',
    },
    {
      accessorKey: 'body',
      header: 'Body',
    },
    {
      header: 'Action',
      enableSorting: false,
      cell: ({ row }: { row: any }) => {
        const id = String(row?.original?.id);
        return (
          <ConfirmWithInputDialog
            title={'Delete'}
            content={
              <>
                <div className="text-primary">{id} is to be deleted.</div>
                <div className="text-destructive">Really delete?</div>
              </>
            }
            input={id}
            okText={'Delete'}
            okVariant="destructive"
            onOk={() => onDelete?.(id)}
          >
            <Button size="sm" variant="destructive">
              Delete
            </Button>
          </ConfirmWithInputDialog>
        );
      },
    },
  ];

  return (
    <>
      <DataTable data={data || []} columns={columns} />
    </>
  );
}
```

```tsx
// @/components/ConfirmWithInputDialog
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
  DialogClose,
} from '@/components/ui/dialog';
import { AlertCircle } from 'lucide-react';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import React from 'react';
import { Input } from '@/components/ui/input';

export default function ConfirmWithInputDialog({
  children,
  onOk,
  content,
  input,
  title,
  description,
  okVariant,
  okText,
  cancelText,
}: {
  children: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  content?: React.ReactNode;
  input: string;
  okVariant?:
    | 'link'
    | 'default'
    | 'destructive'
    | 'outline'
    | 'secondary'
    | 'ghost';
  okText?: React.ReactNode;
  cancelText?: React.ReactNode;
  onOk?: () => Promise<boolean | void> | boolean | void;
}) {
  const [open, setOpen] = React.useState(false);
  const [text, setText] = React.useState('');
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    setText('');
    setError('');
  }, [open]);

  async function handleOk() {
    if (!text || text !== input) {
      setError(`Error: "${text}" does not match "${input}".`);
      return;
    }

    const res = await onOk?.();
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <div>{children}</div>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          {title && <DialogTitle>{title}</DialogTitle>}
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
        <>
          {content}
          <div>
            <Input
              placeholder={`Please write "${input}" to confirm.`}
              value={text}
              onChange={(e) => setText(e.target.value)}
            />

            {error && (
              <Alert variant="destructive" className="mt-3 p-2">
                <div className="flex items-center gap-2">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </div>
              </Alert>
            )}
          </div>
        </>
        <DialogFooter>
          <DialogClose asChild>
            <Button size="sm" variant="secondary">
              {cancelText || 'Cancel'}
            </Button>
          </DialogClose>
          <Button size="sm" onClick={handleOk} variant={okVariant || 'default'}>
            {okText || 'Ok'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
```

```tsx
// import DataTable from '@/components/DataTable';
'use client';

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import React from 'react';

export default function DataTable({ columns, data = [] }: any) {
  const table = useReactTable({
    data: data || [],
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <Table>
      <TableHeader>
        {table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id}>
            {headerGroup.headers.map((header) => {
              return (
                <TableHead key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </TableHead>
              );
            })}
          </TableRow>
        ))}
      </TableHeader>
      <TableBody>
        {table.getRowModel().rows?.length ? (
          table.getRowModel().rows.map((row) => (
            <TableRow
              key={row.id}
              data-state={row.getIsSelected() && 'selected'}
            >
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))
        ) : (
          <TableRow>
            <TableCell colSpan={columns.length} className="h-24 text-center">
              No results.
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

```

### Codesandbox/StackBlitz link

_No response_

### Logs

_No response_

### System Info

```bash
Mac 14.5(23F79)
Chrome 125.0.6422.113
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues