Prevent Redirection in ReactJS

There’s a reason it is recommended not to place interactive elements like buttons inside/within other interactive elements like anchor tags. You could try stopping the click event propagation of the dialog open button from propagating up the DOMTree and hitting the anchor tag, but I couldn’t get this to work as expected in your sandbox (which I suspect may be due to how the Dialog components are implemented).

The logical solution is to un-nest these interactive elements so they can function normally as expected in isolation from one another. Refactor the Inbox UI a bit to render the ApproveDialog outside the link.

Example:

const data = [ .... ];

export default function Inbox() {
  return (
    <div>
      <h1 className="text-xl font-bold">Inbox ({data.length})</h1>

      <div className="flex flex-col border-solid border rounded-md mt-10">
        {data.map((item) => {
          return (
            <div key={item.id} className="flex flex-col items-start gap-2 p-3 text-left text-sm transition-all w-full border-b hover:shadow-md cursor-pointer">
              <a href={`/inbox/${item.id}`} className="flex w-full flex-col gap-1">
                <div className="flex items-center">
                  <div className="flex items-center gap-2">
                    <div className="font-semibold">{item.name}</div>
                  </div>
                </div>
              </a>
                
              <div className="flex w-full flex-col gap-1">
                <div className="flex items-center">
                  <ApproveDialog id={"some test"} />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

The rendered content remains visually identical, but now the button is rendered outside the link and won’t interfere with navigation when all you are trying to do is open the modal/dialog.

Alternative

Update the logic to make the Dialog component fully controlled and totally prevent the default action on the Button component.

Example:

export default function ApproveDialog({ id }: { id: string }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button
          onClick={(e) => {
            e.preventDefault();
            setIsOpen(true);
          }}
          size="sm"
          className="rounded-full"
        >
          Send
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Ready to send?</DialogTitle>
          <DialogDescription>
            Do you want to send this message to the recipient?
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button
              size="sm"
              className="bg-success hover:bg-success text-white"
              type="submit"
              onClick={async () => {
                const response = await fetch("/api/approve", {
                  method: "POST",
                  body: JSON.stringify({ id }),
                });
                if (!response.ok) {
                  alert("error");
                  return;
                }
                alert("success");
              }}
            >
              <Send size={15} className="mr-2" /> Send
            </Button>
          </DialogClose>
          <DialogClose asChild>
            <Button size="sm" variant={"outline"}>
              Cancel
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}