Components: md-autocomplete list doesn't stick on it's position when scrolling on iOS

[molcik]

Bug

What is the expected behavior?

md-autocomplete list should stick on it's position when scrolling on iOS

What is the current behavior?

md-autocomplete list doesn't stick on it's position when scrolling on iOS

What are the steps to reproduce?

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

Current behavior avoids using this component, because in specific circumstances list gets out of the view rectangle.

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

Angular - 4.1.3
OS - iOS 10.2.1

Is there anything else we should know?

[RobJacobs]

Possible duplicate of #4557

[skonx]

+1
I guess the minimum requirement should be "avoid to render the overlay on the input" ;)

[crisbeto]

This should be working in beta.7. Can you give it another shot?

[skonx]

I'm using @angular/material: 2.0.0-beta.7 and it doesn't work yet.

[skonx]

No more chance on https://material.angular.io/components/autocomplete/examples

[skonx]

Hi @molcik, did beta 7 solve your issue? I'm facing the same one.

[skonx]

Still having the issue with beta 8

[skonx]

[grizzm0]

3745 should have fixed repositioning while scrolling. I however noticed myself that it did not reposition in my project. This is because my autocomplete is inside an element with scroll.

My site is separated into 3 sections. sidenav, toolbar and content. Only content scrolls.

If I add a scrollbar to the entire site it works. But I only want the scrollbar on the content element (ie, not stretching over the toolbar).

[sonderbazz]

Also have this issue. Tested in your docs and in our own project.
iOS can be a bitch...

[grizzm0]

See #5797 and see if that helps you. Not sure if it's the same issue or not. Can't try it as there's no plnkr.

[sonderbazz]

@grizzm0 thx for the info :)
but it sadly didn't solve my issue.
So since the issue is also in the docs - I think the issue is still valid.

[BaimosTechnologies]

Here's my Plunker where i added some <br> above the input to better test the scrolling behaviour on iOS.

The scrolling also gets triggered when the virtual keyboard slides from below.

[skonx]

@PhilipSultanescu thanks

[xiongemi]

Any update on this issue? If you open the angular material2 website on the mobile safari, this issue still exists. I think it relates to #6341

[skonx]

Hi @xiongemi.
Correct, it seems to be the same issue :(

[aitboudad]

Hi, FYI I solved that issue by using custom MD_AUTOCOMPLETE_SCROLL_STRATEGY

import {
    MdAutocompleteModule,
    MD_AUTOCOMPLETE_SCROLL_STRATEGY,
    Overlay, Platform,
   ...
} from '@angular/material';

export function MD_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay, platform: Platform) {
    return () => platform.IOS ? overlay.scrollStrategies.block() : overlay.scrollStrategies.reposition();
}

@NgModule({
    imports: [
        MdAutocompleteModule,
        ...
    ],
    providers: [
        ...
        {
            provide: MD_AUTOCOMPLETE_SCROLL_STRATEGY,
            deps: [Overlay, Platform],
            useFactory: MD_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY,
        },
    ],
})

[kevinaud]

@aitboudad I get

'"node_modules/@angular/material/material"' has no exported member 'MD_AUTOCOMPLETE_SCROLL_STRATEGY'

when I try that. Any idea why? I'm on 2.0.0-beta.8

[aitboudad]

@kevinaud MD_AUTOCOMPLETE_SCROLL_STRATEGY will be landed in beta.9 in the meantime you can use the build snapshots for angular/material

// package.json
"@angular/cdk": "angular/cdk-builds",
"@angular/material": "angular/material-builds",

[kevinaud]

Oh okay, thanks for the help.

I've got that all working and the behavior is as expected on my computer, it won't allow scrolling while the autocomplete is open, but its still messed up on my iphone for some reason... As soon as I focus on the autocomplete and the keyboard opens up it moves my view down so the autocomplete is no longer visible.

[Creiger]

@aitboudad Thank you for your solution! Autocomplete works "somehow" on iOS when scrolling (it still does not scroll with body, but does not show over the input), but when i start filtering options it returns to reposition strategy. Any advice?

[josephperrott]

Closing as duplicate of #4557

[skonx]

@aitboudad Thank you very much.
I've just used your code and it seems to be a real improvement so far.
I'm using @angular/cdk: 2.0.0-beta.12 so I needed to swap Md selector to Mat but that's fine.

I've just pasted this in my root module (app.module.ts):

In the imports:

import {MAT_AUTOCOMPLETE_SCROLL_STRATEGY} from '@angular/material'; import { Platform } from '@angular/cdk/platform'; import { Overlay } from '@angular/cdk/overlay';

Before @NgModule annotation:

export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay, platform: Platform) { return () => platform.IOS ? overlay.scrollStrategies.block() : overlay.scrollStrategies.reposition(); }

And then the providers array of the module:

{ provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, deps: [Overlay, Platform], useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, }

I would tell the autocomplete overlay is fixed under the input and is not floading all over the screen when I scroll (that was a real mess) but it seems to be still possible to hide the input field scrolling on the top. I mean that the overlay is not really fixed to the input.
I've checked the CDK, there are directives but I don't believe we can use them on the pre-build component.
I've also tested the cdkScrollable directive... doesn't solve the issue :(

[skonx]

Obviously, this component doesn't work well on iOS (using Safari, Firefox and Chrome).
Furthermore, I've tested on Chrome running on Android 7 and this is exactly the same.
So, I don't believe it's an issue due to a strange behavior on iOS because I've the same thing on Android.
Hope it will be fixed soon.

[murilobd]

Having the same issue here!! Hope this fix soon!!

[AndreiZaman]

Faced with this issue, provided solution with custom MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY not worked for me due

error TS2345: Argument of type '{ imports: (typeof CommonModule | typeof Overlay | InjectionToken<() => ScrollStrategy>)[]; decla...' is not assignable to parameter of type 'NgModule'.
Types of property 'imports' are incompatible.
Type '(typeof CommonModule | typeof Overlay | InjectionToken<() => ScrollStrategy>)[]' is not assignable to type '(any[] | Type | ModuleWithProviders)[]'.
Type 'typeof CommonModule | typeof Overlay | InjectionToken<() => ScrollStrategy>' is not assignable to type 'any[] | Type | ModuleWithProviders'.
Type 'InjectionToken<() => ScrollStrategy>' is not assignable to type 'any[] | Type | ModuleWithProviders'.
Type 'InjectionToken<() => ScrollStrategy>' is not assignable to type 'ModuleWithProviders'.
Property 'ngModule' is missing in type 'InjectionToken<() => ScrollStrategy>'.

Angular - 5.1.0

[matheushf]

by the way it isn't fixed

[carloscasal]

Is this fixed? the samples on the site are fixed, I still experience it.

[juanidrobo]

I have the same issue!
Anybody with a workaround solution??

[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._}