found a solution for the menu items not rendering within HeadlessUI docs

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>

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>
     )