Document MenuList/Popper overflow-y bug

Popper has difficulty calculating positioning when parent has overflow-y: hidden (https://github.com/popperjs/popper-core/issues/535). To fix this, you just have to pass to Popper instance

modifiers: {
  preventOverflow: {
    boundariesElement: 'scrollParent'
  }    
}

To do this in Chakra, you can just do this:

<Menu>
  <MenuButton>{/* .. */}</MenuButton>
  <MenuList
    modifiers={{
      preventOverflow: {
        boundariesElement: "scrollParent"
      }
    }}
  >
    {/* .. */}
  </MenuList>
</Menu>

[yasirtrimulabs]

Didn’t work for me, any other workaround

[yasirtrimulabs]

@0xlarry I ended up using shorter strings as options so it won’t overflow