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.

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

See original GitHub issue

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 autocompletepanel

What is the expected behavior?

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

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.

Issue Analytics

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

Top GitHub Comments

1reaction

emoralesb05commented, May 26, 2017

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

Thankfully material released beta.6 today and exposed ScrollDispatchModule haha

1reaction

emoralesb05commented, May 24, 2017

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

Top Results From Across the Web

autocomplete: panel does not reposition on page scroll #7897

The autocomplete (and all other overlay-based components) will only react to scrolling on the body / html elements, because doing so on ...

mat-autocomplete options dropdown does not stick when ...

Basically the dropdown does not stick in its position when scrolling and I can't figure out why. In the official Material documentation page,...

Angular Autocomplete Scroll Fix - StackBlitz

autocomplete does not stick when scrolling: The expected behavior is autocomplete drop down list should stick to the bottom of input element when...

Improving render of Angular material select and autocomplete ...

Angular material select and autocomplete works fine when you have less data but as soon as data increases the render time will increase,...

Autocomplete | Angular Material

Reference relative to which to position the autocomplete panel. Defaults to the autocomplete trigger element. @Input('matAutocompletePosition'). position: 'auto ...