Shadcn Dialog X/close button not closing the Dialog

Question

I have used the shadcn Dialog component in my react application as below:

Component:

.
.
.
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogClose,
} from '@/components/ui/dialog';
.
.
.
  const [openVoiceEditModal, setOpenVoiceEditModal] = useState<boolean>(false);



  const voiceEditModal = () => {
    setOpenVoiceEditModal(true);
  };
.
.
.

          <Dialog
                        open={openVoiceEditModal}
                        onOpenChange={setOpenVoiceEditModal}
                        key={1}
                      >
                        <DialogTrigger asChild>
                          <FiEdit
                            size={18}
                            className='text-blue-600 cursor-pointer shrink-0'
                            onClick={() => voiceEditModal()}
                          />
                        </DialogTrigger>

                        <DialogContent className='p-3'>
                          <DialogHeader className='sticky top-0 z-50'>
                            <DialogTitle className='text-2xl font-bold text-center'>
                              Voice Models Selection
                            </DialogTitle>
                          </DialogHeader>
                          hi
                          <DialogClose>Close</DialogClose>
                        </DialogContent>
                      </Dialog>

In order to test the Close is workig I have added another button inside DialogContent and triggered close event. It is working but not the defaut close provided by the Dialog which is on top right corner (X) button . if I hover on the button it is not even getting cursor.

I don't know why What I am doing wrong here. The documentation also contains this information only.

Answer 1

I ran into a semi-similar issue where if my form (inside Dialog) had errors, I couldn't get Dialog to close.

Here's what worked for me, replacing the default Dialog icon:

import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    } from "@/components/ui/dialog"
import { RabbitIcon, XIcon } from 'lucide-react';

const DialogComponent = () => {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <Dialog open={dialogOpen}>
        <DialogTrigger onClick={() => setDialogOpen(true)}>
            <RabbitIcon />
        </DialogTrigger>
        <DialogContent className="[&>button]:hidden">
            <DialogClose asChild={true}>
                <XIcon className="flex flex-row justify-self-end" onClick={() => setDialogOpen(!dialogOpen)}/>
            </DialogClose>
            <DialogHeader>
                <DialogTitle>Title</DialogTitle>
                <DialogDescription>
                    Description
                </DialogDescription>
            </DialogHeader>
        </DialogContent>
    </Dialog>
  )
}