autocomplete: panel does not reposition on page scroll

[axtho]

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.

[lucacicala]

Having the same problem using

"@angular/material": "^5.2.4",

any update on this?

[axtho]

No, in fact it has not been touched since the issue was opened. Maybe @crisbeto can give us a little info on the way ahead. It is quite annoying.

[flannanbrody]

I'm having the same issue....but doesn't make sense that on the examples page it works fine https://material.angular.io/components/autocomplete/overview

example...https://stackblitz.com/edit/angular-hifphm?file=app/autocomplete-auto-active-first-option-example.html

[flannanbrody]

Is there any know workarounds?

[rohullah-ayoub]

I am having the same issue with this. Have not found any workarounds.

[vijaychhajer]

Any updates on this. Do we have any fix for it.

[imkiran]

Is this implemented?

[noggin182]

The example page works fine, however if you open it in stackblitz and wrap it in a scrollable div you can see the same problem: https://stackblitz.com/edit/angular-sc6bfp

[ferakiii]

I've got the exact same problem @noggin182, did you find a workaround?

[noggin182]

Not yet @ferakiii, I have to get a fix in place this sprint for the project I am working on though so in the likely case that this isn't resolved before then I will be putting a work around in place. If it's something generic and useable by others I'll paste it here

[bastienlemaitre]

Any news ?

[ghost]

any update on this issue?

[IlyaSolovyov]

Looking forward to a workaround, at the very least.

[crisbeto]

The autocomplete (and all other overlay-based components) will only react to scrolling on the body/html elements, because doing so on absolutely all other elements would be terrible for performance. If your content is inside a different scrollable container, you can add the cdkScrollable attribute to let the CDK know that it should reposition when that element is scrolled.

[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 {}

[crisbeto]

Closing this issue since the autocomplete is working as expected.

[kostas-kapasakis]

https://stackblitz.com/edit/angular-sc6bfp-ft5zvw?file=app%2Fautocomplete-overview-example.html

The issue is still there if you want bigger mat-option content.For example if we set the map-option height style , for example style="height:97px" by navigating with down arrow key the scrolling doesnt work properly

[Natanael1234]

Still happening in 5.2.5.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}