Opening dropdown repositions elements below which seems unexpected

[mikem2005]

I'm not sure if this is a chakra-ui-autocomplete, downshift, or documentation issue, but it seems that the listStyleProps must use absolute position and a positive zIndex otherwise the open menu will push down other page content or render behind which seems unexpected for an element which is supposed to appear over other content.

I was able to work around the issue by

<CUIAutoComplete
  ...
  listStyleProps={{
    position: "absolute",
    zIndex: 1
  }}
>

This issue can be seen by editing example at https://codesandbox.io/s/chakra-ui-autocomplete-example1-8uxbs and placing a <Box> below the <CUIAutoComplete> and opening the menu.

      <Box px={8} py={4}>
        <CUIAutoComplete
          ...
        />
        <Box>I'm below the box</Box> <<<<---- this element moves
      </Box>