From 7d791b86f84b056feb382d315667aa1f08a150cf Mon Sep 17 00:00:00 2001
From: barnabasmolnar <barnabas@excalidraw.com>
Date: Tue, 18 Apr 2023 14:57:25 +0200
Subject: [PATCH] Attempt to fix submenu not disappearing properly.

---
 src/components/dropdownMenu/DropdownMenu.scss |  6 ++
 .../dropdownMenu/DropdownMenuItem.tsx         | 27 +++++----
 .../dropdownMenu/DropdownMenuSubItem.tsx      | 26 ++++----
 .../dropdownMenu/DropdownMenuSubTrigger.tsx   | 19 +++---
 src/packages/excalidraw/example/App.tsx       | 60 ++++++++++++++++++-
 5 files changed, 106 insertions(+), 32 deletions(-)

diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss
index 1b5fd1f39..e1da2aec1 100644
--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -8,6 +8,12 @@
   .dropdown-menu {
     position: absolute;
 
+    .radix-menuitem {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
     &--mobile {
       bottom: 55px;
       top: auto;
diff --git a/src/components/dropdownMenu/DropdownMenuItem.tsx b/src/components/dropdownMenu/DropdownMenuItem.tsx
index 5532dbaae..f9759cc3d 100644
--- a/src/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItem.tsx
@@ -1,10 +1,11 @@
-import React from "react";
 import {
   getDropdownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
 
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
 const DropdownMenuItem = ({
   icon,
   onSelect,
@@ -22,17 +23,19 @@ const DropdownMenuItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
-    <button
-      {...rest}
-      onClick={handleClick}
-      type="button"
-      className={getDropdownMenuItemClassName(className)}
-      title={rest.title ?? rest["aria-label"]}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </button>
+    <DropdownMenuPrimitive.Item className="radix-menuitem">
+      <button
+        {...rest}
+        onClick={handleClick}
+        type="button"
+        className={getDropdownMenuItemClassName(className)}
+        title={rest.title ?? rest["aria-label"]}
+      >
+        <MenuItemContent icon={icon} shortcut={shortcut}>
+          {children}
+        </MenuItemContent>
+      </button>
+    </DropdownMenuPrimitive.Item>
   );
 };
 
diff --git a/src/components/dropdownMenu/DropdownMenuSubItem.tsx b/src/components/dropdownMenu/DropdownMenuSubItem.tsx
index ade5139bc..f27033a43 100644
--- a/src/components/dropdownMenu/DropdownMenuSubItem.tsx
+++ b/src/components/dropdownMenu/DropdownMenuSubItem.tsx
@@ -4,6 +4,8 @@ import {
   useHandleDropdownMenuItemClick,
 } from "./common";
 
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+
 const DropdownMenuSubItem = ({
   icon,
   onSelect,
@@ -21,17 +23,19 @@ const DropdownMenuSubItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
-    <button
-      {...rest}
-      onClick={handleClick}
-      type="button"
-      className={getDropdownMenuItemClassName(className)}
-      title={rest.title ?? rest["aria-label"]}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </button>
+    <DropdownMenuPrimitive.Item className="radix-menuitem">
+      <button
+        {...rest}
+        onClick={handleClick}
+        type="button"
+        className={getDropdownMenuItemClassName(className)}
+        title={rest.title ?? rest["aria-label"]}
+      >
+        <MenuItemContent icon={icon} shortcut={shortcut}>
+          {children}
+        </MenuItemContent>
+      </button>
+    </DropdownMenuPrimitive.Item>
   );
 };
 
diff --git a/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx b/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
index ab6ef353a..5d3087566 100644
--- a/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
+++ b/src/components/dropdownMenu/DropdownMenuSubTrigger.tsx
@@ -8,19 +8,24 @@ const DropdownMenuSubTrigger = ({
   icon,
   shortcut,
   className,
+  ...rest
 }: {
   children: React.ReactNode;
   icon?: JSX.Element;
   shortcut?: string;
   className?: string;
-}) => {
+} & React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <DropdownMenuPrimitive.SubTrigger
-      className={getDropdownMenuItemClassName(className)}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
+    <DropdownMenuPrimitive.SubTrigger className="radix-menuitem">
+      <div
+        {...rest}
+        className={getDropdownMenuItemClassName(className)}
+        title={rest.title ?? rest["aria-label"]}
+      >
+        <MenuItemContent icon={icon} shortcut={shortcut}>
+          {children}
+        </MenuItemContent>
+      </div>
     </DropdownMenuPrimitive.SubTrigger>
   );
 };
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index 4707a63da..d944fd68e 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -507,9 +507,45 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
     return (
       <MainMenu>
         <MainMenu.Sub>
-          <MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Trigger
+            title="Custom trigger"
+            icon={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-6 h-6"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zm-7.518-.267A8.25 8.25 0 1120.25 10.5M8.288 14.212A5.25 5.25 0 1117.25 10.5"
+                />
+              </svg>
+            }
+          >
+            Trigger
+          </MainMenu.Sub.Trigger>
           <MainMenu.Sub.Content>
             <MainMenu.Sub.Item
+              icon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.5}
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
+                  />
+                </svg>
+              }
               onSelect={() => window.alert("You clicked on sub item")}
             >
               Sub item
@@ -523,10 +559,30 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           isCollaborating={isCollaborating}
           onSelect={() => window.alert("You clicked on collab button")}
         />
+        <MainMenu.Sub>
+          <MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content>
+            <MainMenu.Sub.Item
+              onSelect={() => window.alert("You clicked on sub item")}
+            >
+              Sub item
+            </MainMenu.Sub.Item>
+          </MainMenu.Sub.Content>
+        </MainMenu.Sub>
         <MainMenu.Group title="Excalidraw links">
           <MainMenu.DefaultItems.Socials />
         </MainMenu.Group>
-        <MainMenu.Separator />
+        {/* <MainMenu.Separator /> */}
+        <MainMenu.Sub>
+          <MainMenu.Sub.Trigger>Trigger</MainMenu.Sub.Trigger>
+          <MainMenu.Sub.Content>
+            <MainMenu.Sub.Item
+              onSelect={() => window.alert("You clicked on sub item")}
+            >
+              Sub item
+            </MainMenu.Sub.Item>
+          </MainMenu.Sub.Content>
+        </MainMenu.Sub>
         <MainMenu.ItemCustom>
           <button
             style={{ height: "2rem" }}