#1238 Closing ellipses menu when opening another menu (#1240)

pixiebrix · Sep 1, 2021 · d788fe4 · d788fe4
1 parent 88a27bb
commit d788fe4
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 25 deletions.
diff --git a/src/components/ellipsisMenu/EllipsisMenu.stories.tsx b/src/components/ellipsisMenu/EllipsisMenu.stories.tsx
@@ -21,6 +21,7 @@ import EllipsisMenu from "./EllipsisMenu";
 import { action } from "@storybook/addon-actions";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Card } from "react-bootstrap";
 
 const toggleVariantOptions = [
   "primary",
@@ -54,30 +55,49 @@ export default {
   },
 } as ComponentMeta<typeof EllipsisMenu>;
 
-const Template: ComponentStory<typeof EllipsisMenu> = (args) => (
+const items = [
+  {
+    title: "Action",
+    action: action("Action"),
+  },
+  {
+    title: "Another ation",
+    action: action("Another ation"),
+  },
+  {
+    title: (
+      <>
+        <FontAwesomeIcon icon={faTimes} />
+        &nbsp; Something dangerous
+      </>
+    ),
+    action: action("Something dangerous"),
+    className: "text-danger",
+  },
+];
+
+const SingleMenuTemplate: ComponentStory<typeof EllipsisMenu> = (args) => (
   <EllipsisMenu {...args} />
 );
 
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    {
-      title: "Action",
-      action: action("Action"),
-    },
-    {
-      title: "Another ation",
-      action: action("Another ation"),
-    },
-    {
-      title: (
-        <>
-          <FontAwesomeIcon icon={faTimes} />
-          &nbsp; Something dangerous
-        </>
-      ),
-      action: action("Something dangerous"),
-      className: "text-danger",
-    },
-  ],
+export const SingleMenu = SingleMenuTemplate.bind({});
+SingleMenu.args = {
+  items,
+};
+
+const MultipleMenuTemplate: ComponentStory<typeof EllipsisMenu> = (args) => (
+  <Card onClick={action("parent clicked")}>
+    <Card.Body>
+      <div className="p-3">
+        <EllipsisMenu {...args} />
+      </div>
+      <div className="p-3">
+        <EllipsisMenu {...args} />
+      </div>
+    </Card.Body>
+  </Card>
+);
+export const MultipleMenu = MultipleMenuTemplate.bind({});
+MultipleMenu.args = {
+  items,
 };
diff --git a/src/components/ellipsisMenu/EllipsisMenu.tsx b/src/components/ellipsisMenu/EllipsisMenu.tsx
@@ -32,16 +32,35 @@ const EllipsisMenu: React.FunctionComponent<{
   variant?: string;
   items: Item[];
 }> = ({ variant = "light", items }) => {
-  const onToggle = (isOpen: boolean, event: SyntheticEvent<Dropdown>) => {
+  const onToggle = (
+    isOpen: boolean,
+    event: SyntheticEvent<Dropdown>,
+    metadata: {
+      source: "select" | "click" | "rootClose" | "keydown";
+    }
+  ) => {
     event.stopPropagation();
+
+    if (metadata.source === "click" && isOpen) {
+      try {
+        // The click on this toggle doesn't go beyond the component,
+        // hence no other element knows that the click happened.
+        // Simulating the click on the body will let other menus know user clicked somewhere.
+        document.body.click();
+      } catch (error: unknown) {
+        console.debug(
+          "EllipsisMenu. Failed to trigger closing other menus",
+          error
+        );
+      }
+    }
   };
 
   return (
     <Dropdown alignRight onToggle={onToggle}>
       <Dropdown.Toggle className={styles.toggle} variant={variant} size="sm">
         <FontAwesomeIcon icon={faEllipsisV} />
       </Dropdown.Toggle>
-
       <Dropdown.Menu>
         {items
           .filter((x) => !x.hide)