autocomplete: panel does not reposition on page scroll

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

The overlay panel of autocomplete should reposition on mat-sidenav-container scolling underneath

What is the current behavior?

The panel stays put on it original position. Consider this code:

<form class="person-form"
      #personEditForm="ngForm"
      [formGroup]="form"
      (ngSubmit)="save(form.value)"
      (keyup)="onKey($event)"
      novalidate>

    <fieldset fxFlex="100">
        <legend i18n>Status &amp; Tags</legend>
        <mh-tags [source]="tagSource"
                 formControlName="status"
                 placeholder="Status"></mh-tags>
    </fieldset>
...

The component (mh-tags) HTML looks like this:

<mat-form-field floatPlaceholder="always">
  <mat-chip-list #chipList>
    <mat-icon matPrefix>label_outline</mat-icon>
    <mat-chip *ngFor="let tag of _value" (remove)="remove(tag)">
      {{tag.text}} <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input [matChipInputFor]="chipList"
           [matChipInputAddOnBlur]="false"
           (matChipInputTokenEnd)="addNew($event)"
           [matAutocomplete]="auto"
           placeholder="{{placeholder}}"
           #chipInput>
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)="add($event)">
    <mat-option *ngFor="let tag of sourceFiltered()" [value]="tag">
      <span>{{ tag.text }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

Here is the layout for it.

EDIT Produces this:

What are the steps to reproduce?

Could not reproduce on stackblitz because mat-sidenav-container seems not to be part of beta.12. I am using the nightly builds.

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

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

Angular: 4.4.4 Typescript: 2.5.3 Material/cdk: nightlies cli: 1.5.0-rc.1

Is there anything else we should know?

I know there has been a few issues (https://github.com/angular/material2/issues/4557, https://github.com/angular/material2/issues/5797, https://github.com/angular/material2/issues/4093) on this already, plus a couple of PRs (https://github.com/angular/material2/pull/4293, https://github.com/angular/material2/pull/4500, https://github.com/angular/material2/pull/4855, https://github.com/angular/material2/pull/5134) that must have fixed this.

However, in my case it sill remains. May it is because of the way the sticky sidenav works now?

I have tried to apply the cdkScrollable directive to almost every parent element of the autocomplete. No cigar.

[johnbwoodruff]

Any update on this? I have this issue as well, opening it attaches correctly to the element, but when I scroll down it doesn’t reposition, it simply stays at the same position on the page. I can’t use the autocomplete for what I need without this working properly.

[zonr]

I’d like to expand @crisbeto’s approach (which he also mentioned earlier in this comment) with @noggin182 example:

https://stackblitz.com/edit/angular-sc6bfp-ft5zvw

Here’s the diff:

--- angular-sc6bfp/src/app/autocomplete-overview-example.html
+++ angular-sc6bfp-ft5zvw/src/app/autocomplete-overview-example.html
@@ -1,4 +1,4 @@
-<div style="height:400px; overflow:scroll">
+<div style="height:400px; overflow:scroll" cdkScrollable>
   
 <form class="example-form">
   <mat-form-field class="example-full-width">
diff -ru angular-sc6bfp/src/main.ts angular-sc6bfp-ft5zvw/src/main.ts
--- angular-sc6bfp/src/main.ts
+++ angular-sc6bfp-ft5zvw/src/main.ts
@@ -1,5 +1,6 @@
 import './polyfills';
 
+import {ScrollDispatchModule} from '@angular/cdk/scrolling';
 import {CdkTableModule} from '@angular/cdk/table';
 import {CdkTreeModule} from '@angular/cdk/tree';
 import {HttpClientModule} from '@angular/common/http';
@@ -86,6 +87,7 @@
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule,
+    ScrollDispatchModule,
   ]
 })
 export class DemoMaterialModule {}