[Menu] Entire App crashes if no MenuItems exist

Describe the bug When selecting the Menu and no items are rendered, the entire app crashes

Expected Behavior Dropdown should not open (since no items) and definitely not crash the app

To Reproduce https://codesandbox.io/s/great-volhard-ozr5l

Suggested solution(s)

• Don’t open the menu when no menu items are present
• Check before focusing to see if the element exist (this is where the error throws) https://github.com/chakra-ui/chakra-ui/blob/14b0ad5fb5c821032168793406d5a0c2c3cfc849/packages/chakra-ui/src/Menu/index.js#L91

I can make the PR, let me know which way is best

Desktop (please complete the following information):

• OS - MacOS Catalina
• Browser - Chrome
• Version (“@chakra-ui/core”: “^0.5.2”)

Additional context Usually the MenuList component would have children (MenuItem), in the event where the list is populated by data from an api and the server is down, the app should still work, with data that is stored locally. In the example below, the menu is usually populated with a list of schools to choose from, however since the server is down, the list would be empty.

<MenuList placement="bottom-start">
  {schools.map(a => (
    <MenuItem
      fontSize="sm"
      key={a.id}
      onClick={() => selectSchool(a.id)}
    >
      {a.name}
    </MenuItem>
  ))}
</MenuList>

[segunadebayo]

Hi @iRoachie, I’ve just fixed this bug. Ideally, you might not want to render the MenuList if schools array is empty.

I’ll release a patch shortly for this.

[iRoachie]

Thanks, that’s what I ended up doing