Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autocomplete is hidden behind overlay

See original GitHub issue

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:

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)

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

siddharthkpcommented, Mar 17, 2022

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: https://github.com/primer/react/pull/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.

0reactions

glebbashcommented, Oct 11, 2022

Have a similar problem with ActionMenu in Dialog

Top Results From Across the Web

jQueryUI autocomplete hidden behind modal - Stack Overflow

When I open my page and click to open a modal for registration, I'm greeted with a textbox which should auto-complete. When I...

How To Create Autocomplete on an Input Field - W3Schools

Create an Autocomplete Form. Step 1) Add HTML: Example.

Place Autocomplete | Maps JavaScript API - Google Developers

The Place Autocomplete sample demonstrates how to use the Place Autocomplete widget to provide a type-ahead search box. The radio buttons allow you...

Autocomplete | Angular Material

Unique ID to be used by autocomplete trigger's "aria-owns" property. ... Class or list of classes to be applied to the autocomplete's overlay...

8163 (Autocomplete showing on hidden part of overflown div)

comment:1 Changed 11 years ago by Jörn Zaefferer ... You're manually adding the ui-autocomplete class to the input, where it doesn't belong (it...