autocompletes overlay position works wrong on mobile devices

[maku]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Correct overlay position so that the component can be used on mobile devices

What is the current behavior?

On mobile devices (e.g iphone6+ with latest IOS, Android etc.) the position of the overlay is strange.
Sometimes the overlay disappears or the overlay overlaps the input fields ...

So autocomplete is NOT usable on mobile devices....

What are the steps to reproduce?

E.g. use the https://material.angular.io/ demo for autocomplete on mobile devices

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

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

Angular 4.3.3, Material 2.0.0-beta.8

Is there anything else we should know?

[willshowell]

The positioning of the autocomplete just changed to be more accurately connected to the input. Here is an example with the latest build: http://plnkr.co/edit/HnQwfr7WlNVLdP3P6ukQ?p=preview

However, I am still seeing some weird positioning in landscape mode with the keyboard open:

[crisbeto]

The issue is that the keyboard animation throws off the positioning logic. I've been considering whether having a setTimeout on focus for iOS and Android would make sense @jelbourn?

[jelbourn]

@crisbeto that seems reasonable if we scope the delay to only apply for these cases. Let's address this after the overlay positioning refactor

[maku]

@crisbeto is there any timeframe until func is getting better on IOS -> Otherwise I have to consider to replace autocomplete temporarly...

[crisbeto]

The initial plan was to address this after we refactor some of our positioning logic, but I suppose that shouldn't really change what we do in the autocomplete. There should be a way for you to patch it on your side temporarily, but it'll be very hacky, because it would need to access private properties on the autocomplete trigger.

[maku]

@crisbeto what is the way to "patch" autocomplete so that it work better on IOS???

[crisbeto]

I've been playing around with the approach I mentioned above, but it doesn't really work the way I expected it to. It seems like the autocomplete does figure out the proper position values, however iOS throws it off when it scrolls the input into the middle of the view. Delaying the positioning call doesn't help in this case.

[maku]

@crisbeto Is there a solution to this problem? What is the recommended way to go?

[xiongemi]

Any update on this issue?

[mahmood-sajjadi]

@crisbeto, @maku is there any workaround or patch for this issue?

[crisbeto]

This is somewhat tricky to fix on our end, because iOS seems to shift the coordinate grid when it focuses the into view, which makes it so we can't recalculate the position correctly. The best approach for now might be to disable scrolling for the autocomplete altogether. See #5187 (comment).

[maku]

@crisbeto dump question - how do other ui libraries handle this problem?

[crisbeto]

The easiest way to handle it would be to use position: absolute to position the panel, however that is problematic when dealing with focus and overflow.

[maku]

@crisbeto I would really appreciate an advice what to do... - should we drop using autocomplete?? and looking for an alternative (also the fix #5187 does not work for me)
Is there anything in the pipeline? The component as it is is NOT usable on IOS.

Just to be curious - what problems does material2 have what other libs don't have (so that this stuff works on IOS)?

[maku]

@crisbeto I really do not want to be annoying. But is there any kind of solution on the horizon?

[MatteoNY]

Any updates? using latest and issue with iOS positioning as well as touch. I can not select an item from autoComplete component. I'm using the code from your example to test. I have hammer js installed the toggle button works and requires hammer js as per your spec. Not sure why I can not select an item but positioning is still an issue. Thanks!

[LukasKlement]

This very issue is causing headaches on my side too.

The following two suggestions have helped the situation and make the autocomplete somewhat usable on iOS:

1. Add cdkScrollable to your <main …> element (@crisbeto, #4557)
2. Add custom scrolling strategy (@aitboudad, #5187)

[kasperhhk]

We have a related issue, maybe it's the same.

For us, the dropdown list gets hidden entirely by the keyboard, instead of the dropdown list going upwards (the autosuggest field is in the middle of the page).

https://imgur.com/a/nrBUw

[murilobd]

Any updates on this issue?! I'm facing the same problem!!

[michaeldev6]

Just want to add my thoughts on this. As I am facing this issue as well. Not sure if any of this information will help, but figured to add some notes here.

When testing on an iPad in debug mode connected to a MacBook, I noticed that when highlighting the AutoCompletePanel in the HTML element in the debugger, it does highlight the element, and the highlight is shown directly underneath the input field. So the positioning of the css is correct.

But the kicker is that the browser is rendering the auto complete panel NOT where the highlighted HTML is. Which leads me to believe that it is something with how iOS Safari is rendering the HTML elements while the keyboard is up.

This is just a comment supporting @crisbeto comment regaring iOS shifting it's coordinate grid.

[stevenmcountryman]

For anyone still following this thread, hoping for a fix, I got tired of waiting for one and just scrapped the autocomplete from our project entirely and built my own component that looks identical but actually works, for all browsers and all platforms.

The idea is this:

HTML

<div>
    <mat-input-container class="//whatever class you have to make this the right width">
        <input #itemFilterInput matInput type="text" placeholder="ITEM" (click)="showItems = true">
    </mat-input-container>
    <mat-card [hidden]="!showItems" class="autocomplete">
        <mat-option *ngFor="let item of items" [value]="item.name" (click)="selectItem(item)">
            {{ item.name }}
        </mat-option>
    </mat-card>
</div>

TS

showItems: boolean = false;
@ViewChild('itemFilterInput') itemFilterInput: ElementRef;

ngOnInit() {
    Observable.fromEvent(this.itemFilterInput.nativeElement, 'keyup')
        .debounceTime(300)
        .distinctUntilChanged()
        .subscribe(() => {
            this.items = [];
            if (this.itemFilterInput.nativeElement.value && this.itemFilterInput.nativeElement.value.length > 1) 
            {
               this.itemService.getItemsBySearch(this.itemFilterInput.nativeElement.value).subscribe(items => {
               this.items = items;
               this.showItems = true;
            });
        }
    });
}

selectItem(item) {
    this.itemFilterInput.nativeElement.value = item.name;
    this.showItems = false;
}

CSS

.autocomplete {
    max-height: 150px; 
    overflow:auto; 
    position: fixed !important; 
    padding: 0 !important;
    z-index:1000;
}

[sava1192]

Came to same approach as @stevenmcountryman. Created autocomplete by myself because MatAutocomplete is not usable on mobile at all.

[tomscript]

Friendly ping please. I'm using this on an email field so I can't create my own autocomplete.

[MikaStark]

I don’t want to use another dependency. My whole webapp is based on material. I can wait for a patch but i’m very surprised that kind of behavior tooks more than 9 months to be fixed.

[vovikdrg]

@MikaStark good for you in my case I didn't have choice. I must support mobile..

[MikaStark]

After 1 month, here is a little up 🙂

[waseemshaz]

https://www.w3schools.com/tags/tag_datalist.asp

Guys use HTML 5 Datalist, its working awesome

[stevenmcountryman]

@waseemshaz, looks like that isn't supported by Safari at all which makes it a no go

[joelcoxokc]

Is it possible just to add a search field to the select? I think that is why most people want autocomplete in the first place. We just created our own custom component that puts an input inside the mat-select-content

…

On Sat, May 5, 2018 at 5:08 PM stevenmcountryman ***@***.***> wrote: @waseemshaz <https://github.com/waseemshaz>, looks like that isn't supported by Safari at all which makes it a no go — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6341 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEc7HLtB4g6hRurb_iXuKZCuvjHq450dks5tviLTgaJpZM4OwR6o> .

[MikaStark]

June has come and no fix even after couple of material updates

[mhosman]

No news about this one?

[MikaStark]

Nope 😤 still P3 but no one cares 🤪

[sava1192]

waitet for fix for so long, that switched to React already

[jpzwarte]

See the explanation in #11946 where (i think) the problem is in the code (my issue is unrelated to mdAutocomplete, but also involves the iOS keyboard).

[jpzwarte]

So aside from the PR, i also added a workaround to my custom component. The code below works for me on iOS: the overlay is positioned correctly when scrolling with the keyboard visible:

    this.overlayDir.positionChange.subscribe((position: ConnectedOverlayPositionChange) => {
      const clientRect = this.overlayDir.overlayRef.hostElement.getBoundingClientRect();

      if (clientRect.top !== 0) {
        const overlayElement = this.overlayDir.overlayRef.overlayElement,
              overlayY = position.connectionPair.overlayY;

        if (overlayY === 'top') {
          const top = parseInt(overlayElement.style.top);

          overlayElement.style.top = top + Math.abs(clientRect.top) + 'px';
        } else if (overlayY === 'bottom') {
          const bottom = parseInt(overlayElement.style.bottom);

          if (bottom >= Math.abs(clientRect.top)) {
            overlayElement.style.bottom = bottom + clientRect.top + 'px';
          }
        }
      }
    });

[jinder]

@jpzwarte your workaround seems to work perfectly - thanks. My overlays now position correctly when the iOS keyboard is out.

[geoFlux]

@jpzwarte I don't understand your solution. How does one get a reference to overlayDir? Do you have a more complete example?

[jinder]

@geoFlux you can get it using a ViewChild on your cdkConnectedOverlay directive:

<ng-template #connectedOverlay="cdkConnectedOverlay" cdkConnectedOverlay></ng-template>

And then in your component:

  @ViewChild("connectedOverlay") private _connectedOverlay: CdkConnectedOverlay;

[vmachacek]

@jinder I was not able to make it work with sample provided. Do you mind sharing plunker, please?

[itsanmax]

@stevenmcountryman : Thanks for your solution provided here: #6341 (comment). I've applied same solution in my project. This resolve issue of showing list options at correct position but getting issue with selecting option by clicking function "selectItem(item)". Issue here is, selectItem function fires on 2nd time click. It doesn't fire on first time click. Any idea how to solve this issue? It would be really great help if you can help to sort out this issue.

[angular-automatic-lock-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.}