Handle touch start capture as well as mouse down for popover (#49465) (#49736)

* Handle touch start capture as well as mouse down for popover

* Also stop event propagation for touch events on menu item

Co-authored-by: Romeo Van Snick <romeo@romeovansnick.be>

frontend/src/metabase/ui/components/overlays/Menu/MenuItem/MenuItem.tsx

 import type { MenuItemProps as MantineMenuItemProps } from "@mantine/core";
 import { Menu } from "@mantine/core";
-import type { ButtonHTMLAttributes, MouseEvent } from "react";
+import type { ButtonHTMLAttributes, MouseEvent, TouchEvent } from "react";
 
 type MenuItemProps = MantineMenuItemProps &
   ButtonHTMLAttributes<HTMLButtonElement>;
@@ -11,6 +11,15 @@ export function MenuItem(props: MenuItemProps) {
   const handleMouseDownCapture = (event: MouseEvent) => {
     event.nativeEvent.stopImmediatePropagation();
   };
+  const handleTouchStartCapture = (event: TouchEvent) => {
+    event.nativeEvent.stopImmediatePropagation();
+  };
 
-  return <Menu.Item {...props} onMouseDownCapture={handleMouseDownCapture} />;
+  return (
+    <Menu.Item
+      {...props}
+      onMouseDownCapture={handleMouseDownCapture}
+      onTouchStartCapture={handleTouchStartCapture}
+    />
+  );
 }

frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx

@@ -30,6 +30,12 @@ export const getPopoverOverrides = (): MantineThemeOverride["components"] => ({
         const target = event.target as HTMLElement;
         target.setAttribute("data-ignore-outside-clicks", "true");
       },
+      onTouchStartCapture: (event: SyntheticEvent) => {
+        // prevent nested popovers from closing each other
+        // see useClickOutside in @mantine/hooks for the reference
+        const target = event.target as HTMLElement;
+        target.setAttribute("data-ignore-outside-clicks", "true");
+      },
     },
   },
 });