remove all node selectors in useClickOutside

This commit is contained in:
Kendall Garner 2025-09-10 17:49:13 -07:00
parent 78dc89303d
commit 751ad55d02
No known key found for this signature in database
GPG key ID: 9355F387FE765C94

View file

@ -103,19 +103,13 @@ 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 [rating, setRating] = useState<number>(0); const [rating, setRating] = useState<number>(0);
useEffect(() => { useEffect(() => {
setRating(0); setRating(0);
}, [opened]); }, [opened]);
const clickOutsideRef = useClickOutside( const clickOutsideRef = useClickOutside(() => setOpened(false), ['mousedown', 'touchstart']);
() => setOpened(false),
['mousedown', 'touchstart'],
[contextMenuRef, ratingsRef],
);
const viewport = useViewportSize(); const viewport = useViewportSize();
const server = useCurrentServer(); const server = useCurrentServer();
@ -882,7 +876,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
leftIcon: <Icon icon="star" />, leftIcon: <Icon icon="star" />,
onClick: () => {}, onClick: () => {},
rightIcon: ( rightIcon: (
<Group ref={setRatingsRef as any}> <Group>
<Rating <Rating
onChange={(e) => { onChange={(e) => {
handleUpdateRating(e); handleUpdateRating(e);
@ -950,7 +944,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} ref={setContextMenuRef}> <Stack gap={0}>
<Stack gap={0} onClick={closeContextMenu}> <Stack gap={0} onClick={closeContextMenu}>
{ctx.menuItems?.map((item) => { {ctx.menuItems?.map((item) => {
return ( return (