fix clickoutside on main context menu

This commit is contained in:
jeffvli 2025-09-04 20:48:15 -07:00
parent cbbf2db087
commit 53499e2579

View file

@ -101,6 +101,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const [contextMenuRef, setContextMenuRef] = useState<HTMLDivElement | null>(null);
const [ratingsRef, setRatingsRef] = useState<HTMLDivElement | null>(null); const [ratingsRef, setRatingsRef] = useState<HTMLDivElement | null>(null);
const [rating, setRating] = useState<number>(0); const [rating, setRating] = useState<number>(0);
@ -111,7 +112,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
const clickOutsideRef = useClickOutside( const clickOutsideRef = useClickOutside(
() => setOpened(false), () => setOpened(false),
['mousedown', 'touchstart'], ['mousedown', 'touchstart'],
[ratingsRef], [contextMenuRef, ratingsRef],
); );
const viewport = useViewportSize(); const viewport = useViewportSize();
@ -908,7 +909,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
<AnimatePresence> <AnimatePresence>
{opened && ( {opened && (
<ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}> <ContextMenu minWidth={125} ref={mergedRef} xPos={ctx.xPos} yPos={ctx.yPos}>
<Stack gap={0}> <Stack gap={0} ref={setContextMenuRef}>
<Stack gap={0} onClick={closeContextMenu}> <Stack gap={0} onClick={closeContextMenu}>
{ctx.menuItems?.map((item) => { {ctx.menuItems?.map((item) => {
return ( return (