Dropdown causes navbar size to change

[vikigenius]

Wrap the example codesandbox autocomplete inside a nav. Like this.

<ChakraProvider>
  <Flex as="nav" align="center" bg="blue.100" wrap="wrap">
    <Box px={8} py={4}>
      <CUIAutoComplete
        label="Choose preferred work locations"
        placeholder="Type a Country"
        onCreateItem={handleCreateItem}
        items={pickerItems}
        tagStyleProps={{
          rounded: "full",
          pt: 1,
          pb: 2,
          px: 2,
          fontSize: "1rem"
        }}
        selectedItems={selectedItems}
        onSelectedItemsChange={(changes) =>
          handleSelectedItemsChange(changes.selectedItems)
        }
      />
    </Box>
  </Flex>
</ChakraProvider>

Forked CodeSandbox

Now when the toggle button is clicked the dropdown causes navbar size to change. I would like the dropdown to go past the navbar. React Select seems to do this fine. Chakra's own Select component works fine as well.

Is there a way to get the desired behavior similar to React Select or Chakra's Select ?

[koolamusic]

Yeah. I believe you can constrain the width of your Flex or box.
The Autocomplete will adhere to a maxW or maxWidth directive on your Flex or Box element

[vikigenius]

@koolamusic Maybe I am not explaining correctly. But I want to constrain the height. Clicking on the dropdown toggle button causes the navbar size to increase vertically to fit the dropdown inside. But I want the dropdown to be rendered outside of the navbar even though the input element is inside it.

[vikigenius]

Setting maxH in the box element causes the dropdown position to change (it renders over the input element). I want the dropdown to still be below the input.

[koolamusic]

hmm... I think this is something that can be achieved with portals.
because as long and as far as the element in a child of the parent, it has the right to expand the box height or width.

I could be wrong though, but another workaround could be to use absolute positioning with z-index which might require a lot of css, but is possible.

[vikigenius]

Yes, I was thinking about portals as well. But I was playing around with your code and I am not sure how to fix the position to be directly below the input component. Using a portal was causing the dropdown to go to the left corner below the navbar (I want it aligned directly below input)