Fix leaderboard admin closing when trying to remove a leaderboard (#4691)

Author: AlexandreSi

newIDE/app/src/EventsSheet/InlinePopover.js

@@ -11,6 +11,7 @@ import {
   shouldSubmit,
   shouldValidate,
 } from '../UI/KeyboardShortcuts/InteractionKeys';
+import { doesPathContainDialog } from '../UI/MaterialUISpecificUtil';
 
 const styles = {
   popover: {
@@ -54,10 +55,16 @@ export default function InlinePopover(props: Props) {
   return (
     <ClickAwayListener
       onClickAway={event => {
+        // Clicks on dialogs (or their backdrop element) generated by
+        // the AlertProvider seem to trigger this click away listener
+        // even if they are displayed above the InlinePopover element.
+        // To avoid this, we need to check the click is not made on a dialog.
+        if (doesPathContainDialog(event.path)) {
+          return;
+        }
         // For a popover, clicking/touching away means validating,
         // as it's very easy to do it and almost the only way to do it on a touch screen.
         // The user can cancel with Escape.
-
         if (event instanceof MouseEvent) {
           // onClickAway is triggered on a "click" (which can actually happen
           // on a touchscreen too!).

newIDE/app/src/UI/MaterialUISpecificUtil.js

@@ -49,3 +49,19 @@ export const getMuiCheckboxValue = (element: HTMLElement): boolean => {
   }
   return true;
 };
+
+export const doesPathContainDialog = (path: Array<Element>): boolean => {
+  // Dialogs root elements are directly placed in the body element.
+  // So the path is global > document > html > body > dialog.
+  try {
+    return isElementADialog(path[path.length - 5], { isVisible: true });
+  } catch (error) {
+    console.error(
+      `An error occurred when determining if path ${path.join(
+        ' > '
+      )} leads to a dialog`,
+      error
+    );
+    return false;
+  }
+};