Material: mdAutocomplete autoscrolls input out of viewport

[klabelle33]

Actual Behavior:

• What is the issue? * On mobile sites where the autocomplete is some distance down the page, if you scroll down, then start entering text in the input, the page autofocuses some distance down the page such that the input you are typing in is no longer visible.
• What is the expected behavior? The autocomplete remains visible.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: Demo and source
• Details:

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 53.0.2785.109
• OS: * iOS 10.0.2
• Stack Traces:

Also happens on Safari (same OS)

[klabelle33]

I think this is due to the disableScrollAround call, which sets the body of the document to fixed position and assigns a top negative top position to the body. My workaround for this is to negate it with a position: initial !important; top: initial !important css rule on the body.

Incidentally, this also causes any other fixed position elements on the page to behave unexpectedly (moving out of the viewport, for example)

[devversion]

Yeah, correct. I figured out the same while trying with Browserstack.

[devversion]

Just checked this out with master and it seems to work as expected. See #9458

[rajathms]

@klabelle33 @DevVersion issue is back again with the latest version of the angular material. The issue is only with safari browser (mobile only). Input jumps to the top of the screen.
Angular Version: 1.5.8
Angular Material Version: 1.1.9

@klabelle33 Workaround you suggested, works like a champ, thank you 👍

[Splaktar]

@rajathms can you please open a new issue with a CodePen reproduction or point out an example in the docs where this happens? Please reference this issue.