diff --git a/src/components/ui/ShareMenu.tsx b/src/components/ui/ShareMenu.tsx index 9fa0814..1aa85b5 100644 --- a/src/components/ui/ShareMenu.tsx +++ b/src/components/ui/ShareMenu.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; interface ShareMenuProps { targetType: "DECK" | "QUIZ" | "GROUP"; @@ -16,6 +16,24 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }: const [copied, setCopied] = useState(false); const [isGroupShared, setIsGroupShared] = useState(false); const [groupName, setGroupName] = useState(null); + const buttonRef = useRef(null); + const menuRef = useRef(null); + + useEffect(() => { + if (!open) return; + + function handlePointerDown(event: PointerEvent) { + const target = event.target as Node; + if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) { + return; + } + + setOpen(false); + } + + document.addEventListener("pointerdown", handlePointerDown); + return () => document.removeEventListener("pointerdown", handlePointerDown); + }, [open]); useEffect(() => { if (!open) return; @@ -63,6 +81,7 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }: return (