From 979ad8556be3576b09e318c9e85ae0138ecf11ec Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 30 Jun 2021 18:18:04 +0800
Subject: ...

---
 FrontEnd/src/views/common/index.css          |  2 ++
 FrontEnd/src/views/common/menu/PopupMenu.css |  4 +++-
 FrontEnd/src/views/common/menu/PopupMenu.tsx | 32 +++++++++++++++++++++-------
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index e2769fe4..cb1cccd4 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -1,4 +1,6 @@
 :root {
+  --cru-background-color: #f8f9fa;
+
   --cru-primary-color: rgb(255, 105, 0);
   --cru-primary-l1-color: rgb(255, 120, 26);
   --cru-primary-l2-color: rgb(255, 135, 51);
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 8465a1bb..8f8fd20e 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,3 +1,5 @@
 .cru-popup-menu-menu-container {
-
+  border-radius: 5px;
+  border: var(--cru-primary-color) 1px solid;
+  background-color: var(--cru-background-color);
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 50f80a91..851f3bee 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -25,12 +25,24 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
     React.useState<HTMLDivElement | null>(null);
   const [popperElement, setPopperElement] =
     React.useState<HTMLDivElement | null>(null);
-  const [arrowElement, setArrowElement] = React.useState<HTMLDivElement | null>(
-    null
-  );
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    modifiers: [{ name: "arrow", options: { element: arrowElement } }],
-  });
+  const { styles, attributes } = usePopper(referenceElement, popperElement);
+
+  React.useEffect(() => {
+    const handler = (event: MouseEvent): void => {
+      let element: HTMLElement | null = event.target as HTMLElement;
+      while (element) {
+        if (element == referenceElement || element == popperElement) {
+          return;
+        }
+        element = element.parentElement;
+      }
+      setShow(false);
+    };
+    document.addEventListener("click", handler);
+    return () => {
+      document.removeEventListener("click", handler);
+    };
+  }, [referenceElement, popperElement]);
 
   return (
     <>
@@ -52,8 +64,12 @@ const PopupMenu: React.FC<PopupMenuProps> = ({
           style={styles.popper}
           {...attributes.popper}
         >
-          <Menu items={items} />
-          <div ref={setArrowElement} style={styles.arrow} />
+          <Menu
+            items={items}
+            onItemClicked={() => {
+              setShow(false);
+            }}
+          />
         </div>
       ) : null}
     </>
-- 
cgit v1.2.3