#64 fix: breadcrumb menu never closes

MetaCell · Nov 15, 2022 · c560075 · c560075
1 parent 4372099
commit c560075
Showing 1 changed file with 18 additions and 9 deletions.
diff --git a/src/components/common/Breadcrumbs.js b/src/components/common/Breadcrumbs.js
@@ -1,5 +1,6 @@
 import {
   Box,
+  ClickAwayListener,
   IconButton,
   Link,
   MenuItem,
@@ -114,8 +115,11 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
   const collapsed = !!breadcrumbs && breadcrumbs.length > 5;
 
   const handleClick = (event) => {
-    if (event) {
+    console.log('running e ===');
+    if (event && anchorEl === null) {
       setAnchorEl(event.currentTarget);
+    } else if (anchorEl !== null) {
+      setAnchorEl(null);
     }
   };
 
@@ -161,15 +165,20 @@ export const CustomBreadcrumbsWithMenu = ({ breadcrumbs }) => {
           placement="bottom"
           aria-labelledby="with-menu-breadcrumbs"
         >
-          {collapsedCrumbs && collapsedCrumbs.length > 1
-            ? collapsedCrumbs.map((crumb) => (
-                <MenuItem onClick={handleClose} key={crumb.id}>
-                  {crumb.text}
-                </MenuItem>
-              ))
-            : null}
+          <ClickAwayListener onClickAway={handleClose}>
+            <Box>
+              {collapsedCrumbs && collapsedCrumbs.length > 1
+                ? collapsedCrumbs.map((crumb) => (
+                    <MenuItem onClick={handleClose} key={crumb.id}>
+                      {crumb.text}
+                    </MenuItem>
+                  ))
+                : null}
+            </Box>
+          </ClickAwayListener>
         </Popper>
-      )}
+      )} 
+
       <Breadcrumbs
         aria-label="breadcrumbs"
         maxItems={_breadcrumbs.length}