Dropdown Items are appended off page

[nbgooch]

Dropdown Items are appended off page

Describe in detail the issue you're having.

When expanding a dropdown, I see that the items are being attached to the dom and that the correct items are in the object used to populate the items, but the list is not visible as it is being appended off-screen. We are using overlapping divs in which the dropdown is being attached which I presume is causing the problem.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Dropdown/Dropdown List

What did you expect to happen? What happened instead? What would you like to see changed?

It works occasionally, and displays the items correctly, but occasionally it appends the list of the dropdown items off-screen.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

    "carbon-components": "^10.37.0",
    "carbon-components-angular": "^4.56.4",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

SDMA NG

Steps to reproduce the issue

I was unable to recreate this issue in codesandbox. We are using essentially a div as modal that animates up when the user takes an action. I can attach some html to give you a better idea.

Additional information

Failure case pov: https://user-images.githubusercontent.com/79776223/153975459-cfa7def1-0112-4a49-adee-651ea40d56d2.mov

Failure case html:

Successful html:

[nbgooch]

Also important to note I am unable to recreate this issue without updating the items in a subscription of an observable. So I believe it may be tied to updating the dropdown after it is initialized/attached to the dom.

[Akshat55]

Items will be added as a child of ibm-placeholder element. If you want the dropdown items to show up in modal or as a part of ibm-dropdown component, you can set pass appendInline property as true.

E.g.

<ibm-dropdown [appendInline]="true">
	<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
</ibm-dropdown