autocomplete does not stick when scrolling

[weijyewang]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The autocomplete drop down list should stick to the bottom of input element when scrolling

What is the current behavior?

The drop down list is sticky to position on the screen, it will not follow the input element position when scrolling

What are the steps to reproduce?

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

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

Windows 10 64 bit
Chrome Version 64.0.3282.167 (Official Build) (64-bit)
Angular 5.1.2
Angular Material 5.0.2
TypeScript 2.7.1

Is there anything else we should know?

[crisbeto]

That's because, by default, Material won't listen to scroll events on all elements. Is your main scroll container something different than the body?

[weijyewang]

@crisbeto yes, the scroll container is actually mat-sidenav-content element, descendant of the body element, which has overflow: auto set into it. Is there a way to configure the event listener to listen to the element of choosing?

[crisbeto]

Usually you'd have to add the cdkScrollable attribute to your scroll container so the CDK can pick it up, however the sidenav container has it set up already. Can you try adding the ScrollDispatchModule from @angular/cdk/scrolling to your imports?

[karan-kang]

I have noticed that the mat-select does not have this issue, as it blocks scroll action when the panel is opened.

May be autocomplete should follow the same approach.

[ezo5]

Having same use case as @weijyewang with ScrollDispatchModule inported. As @Karankang007 mentioned blocking scroll as mentioned here would be fair enough temporary fix. Tried it with MAT_AUTOCOMPLETE_SCROLL_STRATEGY, no luck.

[NithinBiliya]

Having same issue when the main scroll container is content of dialog popup (mat-dialog-content). Ideally it should work similar to mat-select.

[israelpereira]

I was with the same problem, I used the workaround described in this issue:

#7897

[NithinBiliya]

@israelpereira #7897 did help. On using cdkScrollable the dropdown section is sticking to the input, but it is no more contained within the dialog content section.

Reproduced on stackblitz. Click on the 'open popup' button and scroll the dialog section.

I think the ideal solution would be to disable scroll when the dropdown is opened as suggested by @Karankang007 in comment.

[israelpereira]

I had the same issue.. to solve it.. I found something called ScrollStrategy and I used the following code:

export function scrollFactory(overlay: Overlay): () => CloseScrollStrategy {
	return () => overlay.scrollStrategies.close();
}

@NgModule({
	imports: [modules],
	exports: [modules],
	providers: [
		{ provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
	]
})
export class AppModule {}

It closes the autocomplete box when it identifies the scroll outside the autocomplete.

hope it helps.

[NithinBiliya]

thanks @israelpereira. this helps. The dropdown overlay closes on scroll. The only side effect is that to open the dropdown overlay once again, the focus has to be taken out of the autocomplete input and back into it.

Behaviour similar to mat-select could be achieved if BlockScrollStrategy worked, but sadly it doesn't.

[israelpereira]

Welcome, I had this issue too...

@ViewChild('searchInput', { read: MatAutocompleteTrigger })
triggerAutocompleteInput: MatAutocompleteTrigger;

openAutocompletePanel(){
this.triggerAutocompleteInput.openPanel();
}

//html
<input  (click)="openAutocompletePanel()" />

add this code to the component and put the (click)="openAutocompletePanel()" in the input field, it will solves the problem.

I don't know if it is the best solution, probably not, but worked .. I was losing so much time on it..

[NithinBiliya]

@israelpereira thanks for MatAutocompleteTrigger.openPanel() for opening the dropdown section

[omaracrystal]

Solution:

import { ScrollingModule } from '@angular/cdk/scrolling';

Locate the Modal that has this component. Place the cdkScrollable directive on the outer most div of that Modal... ie:

<div class="full-page-takeover" cdkScrollable> {{ modal content }} </div>

This worked for me.

[YasinK123]

just add below code to your autocomplete function and it will work

appendTo: $('#tag').parent(),

this will stick the autocomplete list to its parent textbox