Clicking a ToggleGroupItem will scroll the browser to the top

[charlesoestergaard]

Clicking any of the ToggleGroupItem makes me scroll to top of the page. Works if i use e.preventDefault(). But then the click/toggle also stops working. What to do?

"use client";

import { BorderBeam } from "@/components/magicui/border-beam";
import ShineBorder from "@/components/magicui/shine-border";
import { Badge } from "@/components/ui/badge";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import formatPrice from "@/lib/format-price";
import { Maximize2 } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";

export default function FrameSelector() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const current = new URLSearchParams(Array.from(searchParams.entries()));

  const handleSelect = (value: any) => {
    if (value === "none") {
      current.delete("frame");
      router.push(`?${current.toString()}`);
      return;
    }
    current.set("frame", value);
    router.push(`?${current.toString()}`);
  };

  return (
    <ToggleGroup
      type="single"
      className="flex items-end justify-start w-full gap-2"
      defaultValue="none"
      onClick={(e) => {
        e.preventDefault();
      }}
      onValueChange={(value) => {
        if (value === "30x40") {
          handleSelect("30x40");
        }
        if (value === "50x70") {
          handleSelect("50x70");
        }
        if (value === "70x100") {
          handleSelect("70x100");
        }
        if (value === "none") {
          handleSelect("none");
        }
      }}
    >
      <ToggleGroupItem
        value="none"
        defaultChecked
        aria-label="Toggle none"
        className="h-12 border-2  flex-col flex-1 xl:flex hidden "
      >
        <h2 className="font-bold l">Ingen ramme 🤦</h2>
      </ToggleGroupItem>
      <ToggleGroupItem
        value="30x40"
        aria-label="Toggle 30x40"
        className="h-[160px] border-2 w-[120px] flex flex-col  "
      >
        <h2 className="font-bold text-xl">30x40</h2>
        <Maximize2 className="h-4 w-4" />
        <Badge className="text-sm bg-primary/70 my-2">{formatPrice(100)}</Badge>
      </ToggleGroupItem>
      <div className="relative">
        <ToggleGroupItem
          value="50x70"
          aria-label="Toggle 50x70"
          className="h-52 border-2 max-w-72 flex flex-col "
        >
          <h2 className="font-bold text-xl">50x70 </h2>
          <Maximize2 className="h-4 w-4" />
          <Badge className="text-sm bg-primary/70 my-2 ">
            {formatPrice(200)}
          </Badge>
          <p>Mest valgte 🔥</p> <BorderBeam borderWidth={2} duration={3.3} />
        </ToggleGroupItem>
      </div>
      <ToggleGroupItem
        value="70x100"
        aria-label="Toggle 70x100"
        className="h-60 border-2 max-w-60 w-40 flex flex-col flex-1"
      >
        <h2 className="font-bold text-xl">70x100</h2>
        <Maximize2 className="h-4 w-4" />
        <Badge className="text-sm bg-primary/70 my-2">{formatPrice(300)}</Badge>
      </ToggleGroupItem>
    </ToggleGroup>
  );
}