components: 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: bildschirmfoto 2017-10-19 um 08 57 15

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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 20 (2 by maintainers)

Most upvoted comments

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.

johnbwoodruff on Jan 16, 2018

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

zonr on Aug 9, 2018

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.

crisbeto on Jul 31, 2018

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

noggin182 on Jul 2, 2018

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 on Apr 17, 2018