fix: useMousePosition can set state after component unmounted

fix: Clicking item in SubMenu does not close parent menu
This commit is contained in:
Tom Moor
2022-12-31 10:34:11 -05:00
parent e70f1ed84c
commit 575f70a9e2
5 changed files with 41 additions and 31 deletions

View File

@@ -1,7 +1,7 @@
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Menu } from "reakit/Menu";
import { Menu, MenuStateReturn } from "reakit/Menu";
import styled, { DefaultTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { depths } from "@shared/styles";
@@ -36,21 +36,23 @@ export type Placement =
| "left"
| "left-start";
type Props = {
type Props = MenuStateReturn & {
"aria-label": string;
visible?: boolean;
placement?: Placement;
animating?: boolean;
unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
/** The parent menu state if this is a submenu. */
parentMenuState?: MenuStateReturn;
/** Called when the context menu is opened. */
onOpen?: () => void;
/** Called when the context menu is closed. */
onClose?: () => void;
hide?: () => void;
/** Called when the context menu is clicked. */
onClick?: (ev: React.MouseEvent) => void;
};
const ContextMenu: React.FC<Props> = ({
children,
onOpen,
onClose,
parentMenuState,
...rest
}) => {
const previousVisible = usePrevious(rest.visible);
@@ -67,19 +69,17 @@ const ContextMenu: React.FC<Props> = ({
React.useEffect(() => {
if (rest.visible && !previousVisible) {
if (onOpen) {
onOpen();
}
if (rest["aria-label"] !== t("Submenu")) {
onOpen?.();
if (!parentMenuState) {
setIsMenuOpen(true);
}
}
if (!rest.visible && previousVisible) {
if (onClose) {
onClose();
}
if (rest["aria-label"] !== t("Submenu")) {
onClose?.();
if (!parentMenuState) {
setIsMenuOpen(false);
}
}
@@ -90,7 +90,7 @@ const ContextMenu: React.FC<Props> = ({
rest.visible,
ui.sidebarCollapsed,
setIsMenuOpen,
rest,
parentMenuState,
t,
]);