Components: Autocomplete initial positioning

[ehegnes]

Bug, feature request, or proposal:

I have a project where the autocomplete dropdown does not properly position itself until it the input box that it is acting upon is unfocused and refocused. It initially extends past the bottom of the screen, choosing to initially position on the bottom of its input box.

Perhaps there could be a directive to force positioning of an autocomplete dropdown?

What is the expected behavior?

Expected behavior is for the autocomplete dropdown to recognize that it will be off-screen if it extends downward and instead position itself above the input box.

What is the current behavior?

In its current behavior, the autocomplete dropdown only calculates its position properly once its input box has been refocused. Switching tabs also causes the autocomplete dropdown to position properly.

What are the steps to reproduce?

The project in which this bug is occurring is already large and mature. I have, as of yet, been unable to reproduce this issue within a simple context.

What is the use-case or motivation for changing an existing behavior?

There may be cases where the code does not properly position the autocomplete dropdown. Adding a directive or other such mechanism for forcing positioning may prove useful.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.5.0
@angular/material: 2.0.0-beta.12
typescript: 2.3.3
OS: (Gentoo) Linux
Browsers: webkit and gecko

Is there anything else we should know?

I don't particularly expect great support since I am unable to provide reproducable steps, but thanks in advance anybody's time in addressing this matter.

[ehegnes]

Alternatively, could somebody with knowledge of the autocomplete internals explain how the component decides where to position itself or point me in the right direction?

[willshowell]

Since you're unable to reproduce, can you at least share a screenshot or screen recording?

[jelbourn]

@ehegnes the source for the positioning is here:
https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position-strategy.ts#L118

It should be pretty straightforward to follow the logic

[mkennedy3000]

@jelbourn I have run into this issue as well.

It occurs when the options are populated while the user is focused on the input.

It can be reproduced here => https://stackblitz.com/edit/angular-4nrrts by focusing the input before the initial 5 second delay for the options to be added.

A quick fix for the issue would be adding an optional Input to MatAutocomplete for the desired initial direction to change what the fallback is here: https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L485

[oxmanroman]

Is there any update in this topic? Same issue

[snajperek130]

I have the same problem :/

[ehegnes]

@snajperek130 please use the reaction feature instead of posting like that to reduce clutter and forgo email notifications of responses that aren't constructive.

[oxmanroman]

What you can do for now is just triggering a fake window resize event, same as they do in their tests, after you get the async results.

You can do this with window.dispatchEvent(new Event('resize')). Obviously not the best solution, just a temporal one until they have the time to fix the bug.

Updated reproduction with fix here.

[mukeshkdangi]

try to add following line in style.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
tis fixed for me

[PunkHaz4rd]

Did they have time to fix the issue ?