Autocomplete is hidden behind overlay

[clarkmcc]

Describe the bug
There are two separate issues here but I was able to reproduce them in the same CodeSandbox so I figured I would create just one issue.

• When I put an AutoComplete inside an Overlay the autocomplete's overlay goes behind the parent Overlay. Is there a way to get around this or is this a bug?
• The Overlay does not position based on the anchorRef, it's always in the top-left of the screen. This is reproducible in the docs actually.

To Reproduce
Steps to reproduce the behavior:

1. Go to this CodeSandbox

Expected behavior
I would expect the AutoComplete's overlay to be on top of the parent's overlay because the autocomplete overlay was opened at a later time.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS 12.2.1
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 99.0.4844.51 (Official Build) (arm64)

[siddharthkp]

Hi!

When I put an AutoComplete inside an Overlay the autocomplete's overlay goes behind the parent Overlay. Is there a way to get around this or is this a bug?

This is definitely a bug. Added it to our board, with a repro: #1976)

I couldn't come up with a quick workaround for it.

The Overlay does not position based on the anchorRef, it's always in the top-left of the screen.

You might want to use AnchoredOverlay instead. It supports renderAnchor for writing the anchor along with the AnchoredOverlay and anchorRef if it's an external anchor.

[mperrotti]

Thanks for taking a look at this @siddharthkp . I couldn't think of any good workarounds with Autocomplete.Overlay either. Using AnchoredOverlay is probably the best way forward for now.

[mperrotti]

Ignore my last comment. I was able to work around this by following the Nested Overlay example in Storybook.

We just need to make sure the autocomplete overlay is rendered after the overlay it's nested in.

Here's working code:

 const [isOpen, setIsOpen] = useState(false)
 const [isAutocompleteOpen, setIsAutoCompleteOpen] = useState(false)
 const handleOpen = () => {
 setIsOpen(true)
 }

 return (
 <AnchoredOverlay
 open={isOpen}
 onOpen={handleOpen}
 onClose={() => setIsOpen(false)}
 width="large"
 height="xsmall"
 side="inside-top"
 renderAnchor={props => <ButtonInvisible {...props}>open overlay</ButtonInvisible>}
 >
 <Autocomplete>
 <Box display="flex" flexDirection="column" height="100%">
 <Box
 paddingX="3"
 paddingY="1"
 borderWidth={0}
 borderBottomWidth={1}
 borderColor="border.default"
 borderStyle="solid"
 >
 <Autocomplete.Input
 block
 as={TextInput}
 id="autocompleteInput"
 onFocus={() => {
 setIsAutoCompleteOpen(true)
 }}
 sx={{
 display: 'flex',
 border: '0',
 padding: '0',
 boxShadow: 'none',
 ':focus-within': {
 border: '0',
 boxShadow: 'none'
 }
 }}
 />
 </Box>
 {isAutocompleteOpen && (
 <Autocomplete.Overlay>
 <Autocomplete.Menu
 items={[
 {text: 'css', id: 0},
 {text: 'css-in-js', id: 1},
 {text: 'styled-system', id: 2}
 ]}
 selectedItemIds={[]}
 aria-labelledby="autocompleteLabel"
 />
 </Autocomplete.Overlay>
 )}
 </Box>
 </Autocomplete>
 </AnchoredOverlay>
 )```

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[glebbash]

Have a similar problem with ActionMenu in Dialog

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.