Theo's Typesafe Cult•12mo ago

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>
  )
}

2 Replies

utdevOP•12mo ago

I am doing this now, forgot the sheet has an open props, works now

"use client"

import { useEffect, useRef, useState } 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 [isOpen, setIsOpen] = useState(false)

  const handleOverviewRoute = () => {
    router.push(`${pathname}?tab=overview`)
  }

  useEffect(() => {
    if (searchParams.get("tab") === "overview") {
      setIsOpen(true)
    }
  }, [pathname, router, searchParams, setIsOpen])

  return (
    <Sheet open={isOpen}>
      <SheetTrigger asChild>
        <Button 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, useState } 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 [isOpen, setIsOpen] = useState(false)

  const handleOverviewRoute = () => {
    router.push(`${pathname}?tab=overview`)
  }

  useEffect(() => {
    if (searchParams.get("tab") === "overview") {
      setIsOpen(true)
    }
  }, [pathname, router, searchParams, setIsOpen])

  return (
    <Sheet open={isOpen}>
      <SheetTrigger asChild>
        <Button 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>
  )
}

Erik•12mo ago

The general tip for situations like this is that if you want to "click" a button with code (in your example that was triggering a click inside of useEffect), just trigger the code that is triggered on that button click instead. So, for example, if your button's "onClick" prop is "someFunction", and you want to "click" that button in useEffect, just call "someFunction" in that useEffect.

Gaming

Programming

Trigger button click on useEffect