Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why my Dialog is not closing after submitting?

I’m having a little bit of trouble, I can now pass the data to the backend, but the problem I’m encountering right now wherein after the user submit the form, the Dialog didn’t close.

I have here a custom calendar wherein if the user select a date, it will change the state of open into true, and after that, I’m passing it to CreateScheduleDialog component.

Calendar.tsx

const [date, setDate] = useState<Date | undefined>(new Date());
const [open, setOpen] = useState<boolean>(false);

const openDialogBox = (currentDate: Date | undefined) => {
  if (currentDate) {
    setDate(currentDate);
    setOpen(true);
  } else {
    setDate(currentDate);
    setOpen(false);
  }
};

return (
  <div className="flex flex-col gap-y-2 h-full md:h-[800px] ">
    <CreateScheduleDialog open={open} setOpen={setOpen} pickedDate={date} />
    <Calendar
      mode="single"
      selected={date}
      onSelect={openDialogBox}
      disabled={(date) => new Date(date) <= new Date()}
      className="shadow border rounded-md h-full w-full flex"
      classNames={{
        months:
          "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
        month: "space-y-4 w-full flex flex-col",
        table: "w-full h-full border-collapse space-y-1",
        head_row: "",
        row: "w-full mt-2",
      }}
      outsidePrompts={"bg-transparent"}
    />
  </div>
);

After submitting it, I make the setOpen to false but nothing happens

Form.tsx

const CreateScheduleDialog = ({ open, setOpen, pickedDate }: Props) => {
  const { mutate, isPending } = useMutation({
    mutationFn: CreateAppointment,
    onSuccess: () => {
      toast.success("Appointment created successfully 🎉", {
        id: "create-appointment",
      });

      form.reset();

      queryClient.invalidateQueries({ queryKey: ["appointment"] });
      setOpen(false);
    },
  });

  const onSubmit = useCallback(
    (values: CreateAppointmentSchemaType) => {
      toast.loading("Creating Appointment...", { id: "create-appointment" });
      mutate(values);
    },
    [mutate],
  );

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button
          disabled={!open} 
          className="w-full"
          color="primary-foreground"
        >
          Add Schedule
        </Button>
      </DialogTrigger>
      <DialogContent className={cn(`max-w-[400px] md:max-w-[800px]`)}>
        <DialogHeader>
          <DialogTitle>{currentStep.name}</DialogTitle>
          <DialogDescription>
            Step {step + 1} of {steps.length}
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-8"
          ></form>
        </Form>
      </DialogContent>
    </Dialog>
  );
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I add additional state.

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

    And then this I used it in actual Dialog

     <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
    <DialogTrigger asChild>
        <Button
          disabled={!open}
          className='w-full' 
          color="primary-foreground"
          onClick={() => setDialogOpen(true)}

  >Add Schedule</Button>
  </DialogTrigger>
</Dialog >

  2. 0

    When using a dialog component in any design library, we determine whether the component will be rendered or not by passing props from the parent component. If you replace your code with the code block below, the problem will be solved. You defined open state but you didn’t use it anywhere.

    <Dialog open={open} onOpenChange={setOpen}>
    <DialogTrigger asChild>
        <Button
          disabled={!open}
          className='w-full' 
          color="primary-foreground"
          onClick={() => setDialogOpen(true)}

  >Add Schedule</Button>
  </DialogTrigger>
</Dialog >
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search