Attempt to fix submenu not disappearing properly.

src/components/dropdownMenu/DropdownMenu.scss

@@ -8,6 +8,12 @@
   .dropdown-menu {
     position: absolute;
 
+    .radix-menuitem {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
     &--mobile {
       bottom: 55px;
       top: auto;

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,6 +23,7 @@ const DropdownMenuItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
+    <DropdownMenuPrimitive.Item className="radix-menuitem">
       <button
         {...rest}
         onClick={handleClick}
@@ -33,6 +35,7 @@ const DropdownMenuItem = ({
           {children}
         </MenuItemContent>
       </button>
+    </DropdownMenuPrimitive.Item>
   );
 };
 

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,6 +23,7 @@ const DropdownMenuSubItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
+    <DropdownMenuPrimitive.Item className="radix-menuitem">
       <button
         {...rest}
         onClick={handleClick}
@@ -32,6 +35,7 @@ const DropdownMenuSubItem = ({
           {children}
         </MenuItemContent>
       </button>
+    </DropdownMenuPrimitive.Item>
   );
 };
 

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
+    <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>
   );
 };

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" }}