Issue with Sheet Component

[adarshSrivastava01]

In this code when I am clicking on submit button and if the validation fails the sheet gets closed automatically, is there a solution for that

const Reject = ({
  trigger,
  isOpen,
  setOpen,
}: {
  trigger: React.ReactNode;
  isOpen: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  const { setNotification } = useNotification();

  const [hasTalked, setHasTalked] = useState<string>();

  const [isRejecting, setIsRejecting] = useState<boolean>(false);

  const onRejectCAFirm = async (e) => {
    setIsRejectingCAFirm(true);

    if (hasTalked === undefined) {
      setNotification({
        show: true,
        valid: false,
        title: 'Error',
        message: 'Please tell us whether the call was done or not.',
      });
      return false;
    }

    const body = {
      x: hasTalkedToCA,
    };

    console.log({ body });

    setIsRejectingCAFirm(false);
    return true;
  };

  return (
    <Sheet open={isOpen} onOpenChange={setOpen}>
      <SheetTrigger asChild>{trigger}</SheetTrigger>
      <SheetContent onClick={(e) => e.stopPropagation()}>
        <SheetHeader>
          <SheetTitle>Not a good fit?</SheetTitle>
          <SheetClose className="rounded-sm text-neutral-4 hover:text-neutral-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
            <X className="h-6 w-6" />
            <span className="sr-only">Close</span>
          </SheetClose>
        </SheetHeader>
        <div className="flex flex-col py-6 px-5 h-[calc(100vh-129px)] overflow-y-auto">
          <div className="flex items-center gap-2">
          <div className="flex flex-col gap-10">
            <div className="flex flex-col gap-5">
              <div className="body-15-medium">
                Did you speak to{' '}
                {caFirm.users.find((user) => user.isAdmin).user.name}?
              </div>
              <RadioGroup
                className="gap-4"
                value={hasTalkedToCA}
                onValueChange={(value) => setHasTalkedToCA(value)}
              >
                <div
                  className={cn(
                    'flex items-center gap-2 py-3.5 px-3 rounded-lg border border-stroke-3',
                    hasTalkedToCA === 'yes' ? 'bg-neutral-6' : ''
                  )}
                >
                  <RadioGroupItem value="yes" id="yes" />
                  <Label htmlFor="yes" className="cursor-pointer">
                    Yes
                  </Label>
                </div>
                <div
                  className={cn(
                    'flex items-center gap-2 py-3.5 px-3 rounded-lg border border-stroke-3',
                    hasTalkedToCA === 'no' ? 'bg-neutral-6' : ''
                  )}
                >
                  <RadioGroupItem value="no" id="no" />
                  <Label htmlFor="no" className="cursor-pointer">
                    No
                  </Label>
                </div>
              </RadioGroup>
            </div>

        </div>
        <SheetFooter className="grid grid-cols-2 space-x-0">
          <Button
            variant="secondary"
            className="rounded-none border-none w-full h-full"
            onClick={() => setOpen(false)}
          >
            Cancel
          </Button>
          <Button
            className="rounded-none border-none w-full h-full"
            onClick={(e) => {
              e.stopPropagation();
              onRejectCAFirm(e);
            }}
          >
            {isRejectingCAFirm ? <Spinner /> : 'Submit & Reject'}
          </Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
};

[victormicco]

It seems like the issue you're facing is that when the validation fails and the error notification is shown, the sheet closes automatically. This behavior might be happening because the onClick event on the submit button is calling setOpen(false) when the Cancel button is clicked. To prevent the sheet from closing when validation fails, you can conditionally set setOpen(false) only when the validation succeeds.

Here's how you can adjust the code: `<Button variant="secondary" className="rounded-none border-none w-full h-full" onClick={() => { // Only close the sheet if validation succeeds if (onRejectCAFirm()) { setOpen(false); } }}

Cancel </Button>`

By wrapping setOpen(false) within the condition that checks if onRejectCAFirm() returns true, the sheet will only close if the validation is successful. If the validation fails and onRejectCAFirm() returns false, the sheet will remain open, allowing the user to correct the validation error. I hope it works well for u <3

[adarshSrivastava01]

Nope it does not seems to solve the problem here

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.