Apply EventBoundary to new Gallery "New" menu

Whenever dialogs with textfields are used inside of menus, we have to carefully
prevents keyboard events from bubbling otherwise the menu will trigger the
selection of the menu item starting with that key rather than allowing the
textfield to receive the characters.

Author: rlamacraft

src/main/webapp/ui/QuirksOfMaterialUi.md

@@ -82,30 +82,6 @@ is inside of a `Menu` then any letters that occur as the first character in any
 of the `MenuItems` will not be enterable into the `TextField` as the event will
 be captured by the `Menu` instead.
 
-The solution is wrap the `Dialog` in a component as defined below that prevents
-the key events, and others, from propagating up to the `Menu`.
+The solution is wrap the `Dialog` in the EventBoundary component
+(src/components/EventBoundary.js).
 
-```
-const EventBoundary = ({ children }: { children: Node }) => (
-  // eslint-disable-next-line
-  <div
-    onKeyDown={(e) => {
-      e.stopPropagation();
-    }}
-    onMouseDown={(e) => {
-      e.stopPropagation();
-    }}
-    onClick={(e) => {
-      e.stopPropagation();
-    }}
-  >
-    {children}
-  </div>
-);
-```
-
-The eslint suppression is required because `div`s should not ordinarilly have
-event handlers as they cannot be focussed. However, in this case, we are just
-using the event listeners on the `div` to prevent the events from further down
-the DOM from propagating up; the user need not interact with the `div` itself
-for this to work.

src/main/webapp/ui/src/Inventory/components/ContextMenu/ContextMenuAction.js

@@ -9,29 +9,7 @@ import ContextMenuSplitButton, {
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import { StyledMenuItem } from "../../../components/StyledMenu";
-
-/*
- * All of the DOM events that happen inside of a context menu action, such as
- * events within a dialog, shouln't propagate outside as the context menu will
- * take them to be events that it should respond to by providing keyboard
- * navigation. See ../../../../QuirksOfMaterialUi.md, secion
- * "Dialogs inside Menus", for more information.
- */
-const EventBoundary = ({ children }: { children: Node }) => (
-  <div
-    onKeyDown={(e) => {
-      e.stopPropagation();
-    }}
-    onMouseDown={(e) => {
-      e.stopPropagation();
-    }}
-    onClick={(e) => {
-      e.stopPropagation();
-    }}
-  >
-    {children}
-  </div>
-);
+import EventBoundary from "../../../components/EventBoundary";
 
 export type ContextMenuRenderOptions = "button" | "menuitem";
 

src/main/webapp/ui/src/components/EventBoundary.js

@@ -0,0 +1,34 @@
+//@flow
+
+import React from "react";
+
+/**
+ * All of the DOM events that happen inside of a dialog shouldn't propagate
+ * outside as the menu will take them to be events that it should respond to by
+ * providing keyboard navigation. See ../../../../QuirksOfMaterialUi.md, secion
+ * "Dialogs inside Menus", for more information.
+ */
+export default ({ children }: { children: Node }) => (
+  /*
+   * The eslint suppression is required because `div`s should not ordinarilly
+   * have event handlers as they cannot be focussed. However, in this case, we
+   * are just using the event listeners on the `div` to prevent the events from
+   * further down the DOM from propagating up; the user need not interact with
+   * the `div` itself for this to work.
+   */
+
+  // eslint-disable-next-line
+  <div
+    onKeyDown={(e) => {
+      e.stopPropagation();
+    }}
+    onMouseDown={(e) => {
+      e.stopPropagation();
+    }}
+    onClick={(e) => {
+      e.stopPropagation();
+    }}
+  >
+    {children}
+  </div>
+);

src/main/webapp/ui/src/eln-dmp-integration/Argos/ArgosNewMenuItem.js

@@ -6,6 +6,7 @@ import NewMenuItem from "../../eln/gallery/components/NewMenuItem";
 import ArgosIcon from "../../eln/apps/icons/Argos.svg";
 import { COLOR } from "../../eln/apps/integrations/Argos";
 import CardMedia from "@mui/material/CardMedia";
+import EventBoundary from "../../components/EventBoundary";
 
 type ArgosNewMenuItemArgs = {|
   onDialogClose: () => void,
@@ -29,13 +30,15 @@ export default function ArgosNewMenuItem({
         }}
         aria-haspopup="dialog"
       />
-      <DMPDialog
-        open={showDMPDialog}
-        setOpen={(b) => {
-          setShowDMPDialog(b);
-          if (!b) onDialogClose();
-        }}
-      />
+      <EventBoundary>
+        <DMPDialog
+          open={showDMPDialog}
+          setOpen={(b) => {
+            setShowDMPDialog(b);
+            if (!b) onDialogClose();
+          }}
+        />
+      </EventBoundary>
     </>
   );
 }

src/main/webapp/ui/src/eln-dmp-integration/DMPOnline/DMPOnlineNewMenuItem.js

@@ -6,6 +6,7 @@ import NewMenuItem from "../../eln/gallery/components/NewMenuItem";
 import DMPonlineIcon from "../../eln/apps/icons/dmponline.svg";
 import { COLOR } from "../../eln/apps/integrations/DMPonline";
 import CardMedia from "@mui/material/CardMedia";
+import EventBoundary from "../../components/EventBoundary";
 
 type DMPonlineNewMenuItemArgs = {|
   onDialogClose: () => void,
@@ -29,13 +30,15 @@ export default function DMPonlineNewMenuItem({
         }}
         aria-haspopup="dialog"
       />
-      <DMPDialog
-        open={showDMPDialog}
-        setOpen={(b) => {
-          setShowDMPDialog(b);
-          onDialogClose();
-        }}
-      />
+      <EventBoundary>
+        <DMPDialog
+          open={showDMPDialog}
+          setOpen={(b) => {
+            setShowDMPDialog(b);
+            onDialogClose();
+          }}
+        />
+      </EventBoundary>
     </>
   );
 }

src/main/webapp/ui/src/eln-dmp-integration/DMPTool/DMPToolNewMenuItem.js

@@ -8,6 +8,7 @@ import { COLOR } from "../../eln/apps/integrations/DMPTool";
 import CardMedia from "@mui/material/CardMedia";
 import axios from "axios";
 import { mapNullable } from "../../util/Util";
+import EventBoundary from "../../components/EventBoundary";
 
 type DMPToolNewMenuItemArgs = {|
   onDialogClose: () => void,
@@ -41,13 +42,15 @@ export default function DMPToolNewMenuItem({
         }}
         aria-haspopup="dialog"
       />
-      <DMPDialog
-        open={showDMPDialog}
-        setOpen={(b) => {
-          setShowDMPDialog(b);
-          onDialogClose();
-        }}
-      />
+      <EventBoundary>
+        <DMPDialog
+          open={showDMPDialog}
+          setOpen={(b) => {
+            setShowDMPDialog(b);
+            onDialogClose();
+          }}
+        />
+      </EventBoundary>
     </>
   );
 }

src/main/webapp/ui/src/eln/gallery/components/Sidebar.js

@@ -50,6 +50,7 @@ import useVerticalRovingTabIndex from "../../../components/useVerticalRovingTabI
 import useViewportDimensions from "../../../util/useViewportDimensions";
 import { observer } from "mobx-react-lite";
 import { autorun } from "mobx";
+import EventBoundary from "../../../components/EventBoundary";
 library.add(faImage);
 library.add(faFilm);
 library.add(faFile);
@@ -212,50 +213,52 @@ const NewFolderMenuItem = ({
   const { createFolder } = useGalleryActions();
   return (
     <>
-      <Dialog
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-      >
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            void createFolder(path, folderId, name).then(() => {
-              onDialogClose(true);
-            });
+      <EventBoundary>
+        <Dialog
+          open={open}
+          onClose={() => {
+            setOpen(false);
           }}
         >
-          <DialogTitle>New Folder</DialogTitle>
-          <DialogContent>
-            <DialogContentText variant="body2" sx={{ mb: 2 }}>
-              Please give the new folder a name.
-            </DialogContentText>
-            <TextField
-              size="small"
-              label="Name"
-              onChange={({ target: { value } }) => setName(value)}
-            />
-          </DialogContent>
-          <DialogActions>
-            <Button
-              onClick={() => {
-                setName("");
-                setOpen(false);
-                onDialogClose(false);
-              }}
-            >
-              Cancel
-            </Button>
-            <SubmitSpinnerButton
-              type="submit"
-              loading={false}
-              disabled={false}
-              label="Create"
-            />
-          </DialogActions>
-        </form>
-      </Dialog>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              void createFolder(path, folderId, name).then(() => {
+                onDialogClose(true);
+              });
+            }}
+          >
+            <DialogTitle>New Folder</DialogTitle>
+            <DialogContent>
+              <DialogContentText variant="body2" sx={{ mb: 2 }}>
+                Please give the new folder a name.
+              </DialogContentText>
+              <TextField
+                size="small"
+                label="Name"
+                onChange={({ target: { value } }) => setName(value)}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button
+                onClick={() => {
+                  setName("");
+                  setOpen(false);
+                  onDialogClose(false);
+                }}
+              >
+                Cancel
+              </Button>
+              <SubmitSpinnerButton
+                type="submit"
+                loading={false}
+                disabled={false}
+                label="Create"
+              />
+            </DialogActions>
+          </form>
+        </Dialog>
+      </EventBoundary>
       <NewMenuItem
         title="New Folder"
         avatar={<CreateNewFolderIcon />}