Issue fix for the menu has no menu items #1223 (#1279)

* fix issue #1223 * fix empty menu items without useState
segmentio · Jan 15, 2022 · 71904a1 · 71904a1
1 parent 77c3141
commit 71904a1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/docs/documentation/components/menu.mdx b/docs/documentation/components/menu.mdx
@@ -181,7 +181,7 @@ function MenuOptionsGroupExample() {
           { label: 'Descending', value: 'desc' },
         ]}
         selected={selectedOrder}
-        onChange={(selected) => setSelectedOrder(selected)}
+        onChange={selected => setSelectedOrder(selected)}
       />
       <Menu.Divider />
       <Menu.OptionsGroup
@@ -194,7 +194,7 @@ function MenuOptionsGroupExample() {
           { label: 'Type', value: 'type' },
         ]}
         selected={selectedField}
-        onChange={(selected) => setSelectedField(selected)}
+        onChange={selected => setSelectedField(selected)}
       />
     </Menu>
   )
@@ -237,3 +237,9 @@ The focus styles are currently not working in the docs, sorry for the inconvenie
   <Button>Custom Menu Items</Button>
 </Popover>
 ```
+
+## Menu without items
+
+```jsx
+<Menu></Menu>
+```
diff --git a/src/menu/src/Menu.js b/src/menu/src/Menu.js
@@ -9,25 +9,17 @@ import MenuOptionsGroup from './MenuOptionsGroup'
 
 const Menu = memo(function Menu(props) {
   const menuRef = useRef(null)
+
   const firstItem = useRef()
   const lastItem = useRef()
 
   const menuItems = useRef()
 
   useEffect(() => {
     const currentMenuRef = menuRef.current
-
-    menuItems.current = currentMenuRef
-      ? [
-          ...currentMenuRef.querySelectorAll(
-            '[role="menuitemradio"]:not([disabled]), [role="menuitem"]:not([disabled])'
-          )
-        ]
-      : []
-
-    if (menuItems.current.length === 0) {
-      throw new Error('The menu has no menu items')
-    }
+    menuItems.current = [
+      ...currentMenuRef.querySelectorAll('[role="menuitemradio"]:not([disabled]), [role="menuitem"]:not([disabled])')
+    ]
 
     firstItem.current = menuItems.current[0]
     lastItem.current = menuItems.current[menuItems.current.length - 1]
@@ -68,9 +60,7 @@ const Menu = memo(function Menu(props) {
       const { target } = e
       const menuItem = menuItems.current && menuItems.current.find(item => item === target)
 
-      if (!menuItem) {
-        return
-      }
+      if (!menuItem) return
 
       if (e.key === 'ArrowDown') {
         e.preventDefault()
@@ -101,9 +91,17 @@ const Menu = memo(function Menu(props) {
   }, [menuRef])
 
   const { children } = props
+
+  const renderEmptyChildren = () => {
+    return (
+      <MenuGroup>
+        <MenuItem disabled>No items...</MenuItem>
+      </MenuGroup>
+    )
+  }
   return (
     <Pane is="nav" ref={menuRef} role="menu" outline="none">
-      {children}
+      {children || renderEmptyChildren()}
     </Pane>
   )
 })

diff --git a/src/menu/stories/index.stories.js b/src/menu/stories/index.stories.js
@@ -195,6 +195,9 @@ storiesOf('menu', module)
       >
         <Button>Hover menus</Button>
       </Popover>
+      <Popover position={Position.BOTTOM_LEFT} content={<Menu></Menu>}>
+        <Button marginTop={16}>Without Menu Items</Button>
+      </Popover>
 
       <UnorderedList marginTop={24}>
         <ListItem>Arrow down on a button will bring focus inside the popover.</ListItem>