diff --git a/src/common/Menu/Menu.tsx b/src/common/Menu/Menu.tsx
index 0aefbd473..bca6bb98b 100644
--- a/src/common/Menu/Menu.tsx
+++ b/src/common/Menu/Menu.tsx
@@ -9,8 +9,8 @@ import styles from './styles.less';
type Props = {
children: JSX.Element,
className: string,
- shortcut: string,
- position: MenuPosition,
+ shortcut?: string,
+ position?: MenuPosition,
};
const createId = () => (Math.random() + 1).toString(36).substring(7);
@@ -27,22 +27,23 @@ const Menu = ({ children, className, shortcut, position }: Props) => {
useEffect(() => {
const parent = element.current?.parentElement;
- parent.addEventListener('click', onToggle);
-
- menu.create({
- id: id.current,
- className,
- parent,
- position,
- });
+ if (parent) {
+ parent.addEventListener('click', onToggle);
+ menu.create({
+ id: id.current,
+ className,
+ parent,
+ position,
+ });
+ }
return () => {
- parent.removeEventListener('click', onToggle);
+ parent && parent.removeEventListener('click', onToggle);
menu.remove(id.current);
};
}, []);
- useKeyboardEvent(shortcut, onToggle, !shortcut);
+ shortcut && useKeyboardEvent(shortcut, onToggle, !shortcut);
return <>
diff --git a/src/common/Menu/MenuProvider.tsx b/src/common/Menu/MenuProvider.tsx
index 0a8b9524e..8dcba5c19 100644
--- a/src/common/Menu/MenuProvider.tsx
+++ b/src/common/Menu/MenuProvider.tsx
@@ -17,7 +17,7 @@ const MenuProvider = ({ children, className }: Props) => {
const container = useRef(null);
const [menus, setMenus] = useState