Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix: share popup not closing when clicking outside menu
All checks were successful
Automated Container Build / build-and-push (push) Successful in 57s
Details

Browse source
This commit is contained in:
Elijah 2026-07-11 19:36:17 -07:00
parent 061d13f421
commit f0548bcc6e
1 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/ui/ShareMenu.tsx
View file

@ -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<string | null>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(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 (
<div className="relative">
<button
ref={buttonRef}
onClick={() => setOpen(!open)}
className={`${compact ? "h-8 w-8 rounded-lg" : "h-10 w-10 rounded-xl"} grid place-items-center text-text-muted transition-colors hover:bg-bg-surface-alt hover:text-primary`}
title="Share"
@ -75,7 +94,7 @@ export function ShareMenu({ targetType, contentId, classSlug, compact = false }:
{open && (
<>
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
<div className="absolute right-0 z-50 mt-2 w-72 origin-top-right animate-slide-up rounded-2xl border border-border-light bg-bg-surface p-5 shadow-[var(--shadow-modal)]">
<div ref={menuRef} className="absolute right-0 z-50 mt-2 w-72 origin-top-right animate-slide-up rounded-2xl border border-border-light bg-bg-surface p-5 shadow-[var(--shadow-modal)]">
<h4 className="editorial-title mb-3 text-xl text-text-heading">Public sharing</h4>
{loading ? (