Next.js Discord

Discord Forum

How can i fix the button being clicked twice?

Answered
Banana posted this in #help-forum
Open in Discord
BananaOP
Basically i have a user dropdown menu and ive tried adding a cooldown so when you click the button and the dropdown is already open that it wouldnt reopen it

Code:
<>
              <div className='relative'>
                <button className="flex items-center space-x-2 px-4 py-2 rounded-xl hover:bg-gray-800 transition" onClick={toggleDropdown}>
                  <Image src={user.avatarURL} alt="" aria-hidden={true} role='presentation' width={30} height={30} className='rounded-full' />
                  <span>{user.username}</span>
                </button>
                {isOpen && (
                  <div ref={dropdownRef} className="absolute right-0 mt-2 w-full md:w-auto py-2 bg-[#050508] rounded-lg shadow-xl z-50">
                    <div className="flex items-center space-x-3 px-4 py-2">
                      <Image src={user.avatarURL} alt="User Avatar" width={30} height={30} className='rounded-full' />
                      <span className="text-sm text-white">{user.username}</span>
                    </div>
                    <hr className="my-2 border-gray-700" />
                    <Link href="/profile" className="flex items-center w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-[#272934]">
                      <FaRegUser className="mr-2 text-lg" /> <span>Profile</span>
                    </Link>
                    <Link href="/submit-bot" className="flex items-center w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-[#272934]">
                      <MdAddCircleOutline className="mr-2 text-lg" /> <span>Submit Bot</span>
                    </Link>
                    <Link href="/logout" className="flex items-center w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-[#272934]">
                      <BiLogOut className="mr-2 text-lg" /> <span>Logout</span>
                    </Link>
                  </div>
                )}
              </div>
            </>
Answered by Sun bear
maybe try radix or shadcn so you don't have to build your own primitives
View full answer

4 Replies

BananaOP
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { user, loading } = useUser();
  const toggleDropdown = () => setIsOpen(!isOpen);
Sun bear
You need to provide more context
Sun bear
maybe try radix or shadcn so you don't have to build your own primitives
Answer
BananaOP
alright