Trigger button click on useEffect
I am trying to trigger my button so my Sheet shows up, but it currently does not work on refresh, if I log the sheet in my useEffect it correctly contains the node and it also goes inside the if condition:
"use client"
import { useEffect, useRef } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import { DashboardOverview } from "@/components/overview"
export function DashboardSheet() {
const sheetButtonRef = useRef<HTMLButtonElement>(null)
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const handleOverviewRoute = () => {
router.push(`${pathname}?tab=overview`)
}
useEffect(() => {
if (searchParams.get("tab") === "overview" && sheetButtonRef.current) {
sheetButtonRef.current.click()
}
}, [pathname, router, searchParams, sheetButtonRef])
return (
<Sheet>
<SheetTrigger>
<Button ref={sheetButtonRef} onClick={handleOverviewRoute}>
Open Overview
</Button>
</SheetTrigger>
<SheetContent side="rightHalfFull" className="z-[1200]">
<SheetHeader>
<SheetTitle className="py-2">Overview</SheetTitle>
<SheetDescription>
<DashboardOverview />
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
)
}"use client"
import { useEffect, useRef } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import { DashboardOverview } from "@/components/overview"
export function DashboardSheet() {
const sheetButtonRef = useRef<HTMLButtonElement>(null)
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
const handleOverviewRoute = () => {
router.push(`${pathname}?tab=overview`)
}
useEffect(() => {
if (searchParams.get("tab") === "overview" && sheetButtonRef.current) {
sheetButtonRef.current.click()
}
}, [pathname, router, searchParams, sheetButtonRef])
return (
<Sheet>
<SheetTrigger>
<Button ref={sheetButtonRef} onClick={handleOverviewRoute}>
Open Overview
</Button>
</SheetTrigger>
<SheetContent side="rightHalfFull" className="z-[1200]">
<SheetHeader>
<SheetTitle className="py-2">Overview</SheetTitle>
<SheetDescription>
<DashboardOverview />
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
)
}