autocomplete: virtual keyboard not appearing on mobile/android

[matthesrieke]

Bug:

CodePen Demo which demonstrates the issue:

https://codepen.io/anon/pen/mKjXMN (default CodePen created from the "Floating Label" example in https://material.angularjs.org/1.1.9/demo/autocomplete)

Detailed Reproduction Steps:

1. Open up https://material.angularjs.org/1.1.9/demo/autocomplete on Chrome in Android (tested with two Android 7.0 stock ROMs (Huawei Honor 9 and HTC One M9)
2. Scroll to the floating label example and tap the "Favorite State" input
3. Type something that matches (e.g. "Ari")
4. Tap outside of the input and suggestions
5. Wait 2-3 seconds
6. Tap again into the "Favorite State" input

What is the expected behavior?

The Virtual Keyboard should open up when tapping into the input field

What is the current behavior?

The Virtual Keyboard does not appear most of the time. When tapping outside and again inside within a short period (< 1 second) the virtual keyboard more reliably appears.

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

Bug.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.7
• AngularJS Material: 1.1.9
• OS: Android 7.0 stock ROMs (Huawei Honor 9 and HTC One M9)
• Browsers: Chrome (Brave also applies)

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

I am not able to reproduce this using a Pixel XL running Android 8.1.0 with Chrome or Firefox. I tried quick pauses and long pauses, but the virtual keyboard appeared almost instantly each time.

Please provide more details on the reproduction and some indication of how this is a bug in AngularJS Material.

[matthesrieke]

Thanks for testing the issue. I can only give you the information I had in my original posting. The one difference I see is the Android version. I can only report it for 7.0 (I do not have other devices at my disposal). I have created a quick GIF showcasing the issue. I can also tell that normal input fields (both common HTML as well as Material inputs) work perfectly fine and always open up the virtual keyboard.

Edit: at the end of the GIF you can see the autocomplete progress bar appearing for a blink of an eye for multiple times. That were the taps on the input field.

[Ruudi-V]

I currently have an analogous problem. The bug was introduced, when i added md-min-length="0" to the autocomplete.

Related code: https://codepen.io/anon/pen/mjOQRd

Tested on Galaxy Tab Active2, Google Chrome for Android ver 67.0.0.3396.87

[Ruudi-V]

What more info could I provide to help you track down the bug?

[Splaktar]

@Ruudi-V your CodePen doesn't run for me. I tried to fix it a bit, but it seems to have some external dependencies.

[Splaktar]

I tested this again on a Motorola Nexus 6 with Android 7.0.0. I used SwiftKey keyboard and saw no problems or delays at all. Then I tested with GBoard (the Google Keyboard) and there were a few cases where I could get it to take 2-6 seconds before the keyboard would appear. However, this is an issue with Android and GBoard and not AngularJS Material.

I also tested with the autocomplete panel overlapping the virtual keyboard and I did not see the issue above where the keyboard flickers and then dismisses.

I used this updated CodePen for testing and added the md-min-length="0" mentioned above, but it didn't reproduce the issue for me.

[Ruudi-V]

Tried your updated CodePen and was able to recreate the issue.

When logging with System Info for Android and spamming the autocomplete I saw the following error:

[Splaktar]

@Ruudi-V those logs are very helpful, thank you. Please submit a bug against Chrome for Android here. It looks like Chrome for Android is not handling this error properly when the device is low on memory. It's possibly also related to having hardware acceleration disabled.

Please post the link to the bug here afterwards so that people following this issue can star that Chrome issue as well.

[Ruudi-V]

Created a chrome bug issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=869764

[Splaktar]

@Ruudi-V can you please copy paste the text from those logs (not just a screenshot) into the Chromium bug please? That is the key indicator that this is a Chrome for Android bug. Without that, they may just dismiss the issue.

[Splaktar]

https://bugs.chromium.org/p/chromium/issues/detail?id=869764 was closed by the Chromium team as part of a bulk issue closing earlier this week. @Ruudi-V are you able to re-open the issue?

[andresgardiol]

Hi, I have the same problem on my Xiaomi A2 lite with Android 9. When I enter the Angularjs Material page it does not show the virtual keyboard when I click on the first and second input of the autocomplete demo. I'm using it in my application and it does not work properly either.

[Splaktar]

As a response to my previous comment, I was able to get the Chromium team to reopen the issue.

@andresgardiol can you please add your phone model, android version, keyboard, and Chrome version to a comment in the Chromium bug? It would also be great if you could share a screen recording so that the Chromium team can continue debugging this.

If anyone else is still experiencing this with a recent version of Chrome, they are asking for

if anyone could repo on recent Chrome releases and share the new info including Android/keyboard/screen record with us.

[andresgardiol]

Ok, I already commented on the problem in the link that you send me. Thank you

[andresgardiol]

Was there any news about this issue?

[Splaktar]

Nope, it's blocked by the Chromium team. They did identify that it was a regression in Chrome 62.