From 70cbe9d11eaacfdbd190de2c2d64bacc3d556a43 Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Tue, 7 Sep 2021 21:51:47 -0400
Subject: [PATCH] found a solution for the menu items not rendering within
 HeadlessUI docs

---
 .../components/EditorMenu/AllShortcutsModal.tsx    | 14 --------------
 app/web/src/components/EditorMenu/Dropdowns.tsx    |  4 +++-
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/app/web/src/components/EditorMenu/AllShortcutsModal.tsx b/app/web/src/components/EditorMenu/AllShortcutsModal.tsx
index 2a63e4e..64b9084 100644
--- a/app/web/src/components/EditorMenu/AllShortcutsModal.tsx
+++ b/app/web/src/components/EditorMenu/AllShortcutsModal.tsx
@@ -18,22 +18,8 @@ const AllShortcutsModal = () => {
     const classes = useStyles()
     const [open, setOpen] = useState(false)
     useHotkeys(SHORTCUT, () => setOpen(!open), [open])
-    const { state, thunkDispatch } = useIdeContext()
 
     return (<>
-        <div className="hidden">
-          <Menu>
-          { editorMenuConfig.filter(menu => menu.items.length).map(menu =>
-            menu.items.map(item => (
-                <item.component
-                  state={state}
-                  thunkDispatch={thunkDispatch}
-                  config={item}
-                  key={menu.label +"-"+ item.label } />
-              ))
-            )}
-          </Menu>
-        </div>
         <Dialog open={open} onClose={() => setOpen(false)} className={classes.root}>
         <div className="bg-ch-gray-700 font-fira-sans max-w-7xl rounded shadow-lg text-ch-gray-300 p-4">
             <h2 className="text-2xl mb-4">All Shortcuts</h2>
diff --git a/app/web/src/components/EditorMenu/Dropdowns.tsx b/app/web/src/components/EditorMenu/Dropdowns.tsx
index 18e0fbc..ad31b93 100644
--- a/app/web/src/components/EditorMenu/Dropdowns.tsx
+++ b/app/web/src/components/EditorMenu/Dropdowns.tsx
@@ -35,12 +35,14 @@ export function Dropdown({
     return (
       <div className="relative">
         <Menu>
+        {({ open }) => (<>
           <Menu.Button className={"text-gray-100" + (disabled ? " text-gray-400 cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
           { children &&
-          <Menu.Items className="absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700">
+          <Menu.Items static className={(open ? "" : "hidden ") + "absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700"}>
             {children}
           </Menu.Items>
           }
+        </>)}
         </Menu>
       </div>
     )