Covalent: [BUG] Material autocomplete panel not repositioned on scroll when using with covalent layout

[filipows]

Bug Report

When using Covalent Layout component (td-layout-nav), autocomplete panel is not repositioned on scroll. Repositioning autocomplete panel on scroll was fixed for Meterial 2.0.0-beta.4:
autocomplete: reposition panel on scroll, but the problem still occurs when using with Covalent TdLayout.

Screenshots or link to CodePen/Plunker/JSfiddle

Plunker showing the problem:
http://plnkr.co/edit/YXTXK5q8JgutjfjgAAIu?p=preview

What is the expected behavior?

Plunker showing expected behavior (the same example without td-layout-nav)
http://plnkr.co/edit/NrQGu2pk5vGLlfIdoPWz?p=preview

What is the motivation / use case for changing the behavior?

It becomes a real problem when using on mobile devices. After selecting autocomplete, the device keyboard appears and when there is not enough space (quite often), just covers the autocomplete panel, which makes this component unusable.

Which version of Angular and Material, and which browser and OS does this issue affect?

• Angular 4.1.1
• Material 2.0.0-beta.5
• Covalent 1.0.0-beta.4
• Chrome Version 58.0.3029.110 (64-bit)

Did this work in previous versions of Angular / Material?
No, it didn't.

[emoralesb05]

I need to check how they fixed it, since it looks like it cares about having a main window scroll vs a parent element scroll.. so this might still be a material issue.

Gonna dig into this and see what causes it to explain it better in their repo.

[emoralesb05]

So yeah, this seems like a material issue since to achieve this they are doing 2 things:

1). They first subscribe to the scrolled observable to reposition the autocomplete when scrolled.

https://github.com/angular/material2/commit/81a6f8dbd8b01d4d9e70154c7fd8402c97ef8cfe#diff-eb4e9504d51709de10cf2897ad1eed7aR144

2). Whenever a scroll event happens, it lets the autocomplete know and it updated the overlay position.

The problem with this is that scrolled only happens when its a scroll event in window.document

https://github.com/angular/material2/blob/master/src/lib/core/overlay/scroll/scroll-dispatcher.ts#L60-L64

So if you scroll on any children that contain the autocomplete.. this will happen also. td-layout just made it more obvious haha

I might need to create an issue or PR in the material repo with all this info and a plnk with just a surrounding div that causes it.

Good find!

[emoralesb05]

Hmm.. after looking at the code base again.. it might be that and that we need to add cdk-scrollable to almost every scrollable container in covalent and in products.

So it might be a mix of things

[emoralesb05]

https://github.com/Teradata/covalent/pull/628 will take care of this.

Thankfully material released beta.6 today and exposed ScrollDispatchModule haha

[acharyaks90]

hi you all can fix with
.ui-autocomplete {
position: relative;
}