Material: autocomplete: clearing the input disables displaying the dropdown on focus

[jul1ans]

Actual Behavior:

• What is the issue? * When I close the keyboard on android devices and then clear the autocomplete input (clicking the x), I can't open the dropdown again. Only if I type something, the dropdown opens again.
• What is the expected behavior? After clearing the input and clicking again inside the input, the dropdown with all results should open.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: This also happens with the basic usage demo https://material.angularjs.org/latest/demo/autocomplete
• Details: Click inside the input
  Select something
  Close the keyboard
  Click the X / Clear the result
  Click inside the input again

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome for Android
• Browser Version: * tested on 52 and 55
• OS: * Android 6.0
• Stack Traces:

[Splaktar]

I can reproduce on the latest docs site (1.1.7).

[mjgerace]

This occurs for me as well. Any workarounds?

[Splaktar]

https://github.com/angular/material/issues/10834#issue-248001061 contains a possible fix that needs to be tested and reviewed.

[AndrusovaK]

Hi, I need your help.
I tried to use possible fix from https://github.com/angular/material/issues/10834#issue-248001061 with 1.1.10 locally, but it doens't work for me.

After clearing the input I can't even make input focused again and so I can't type anything to make it work.
Input become focused only if I use long press (as if I want to highlight text). But in this case keyboard is not shown.

Is it the same issue or a different one?

[Splaktar]

@AndrusovaK I agree, after reviewing your feedback and that proposed change, it does appear to be a different issue. Thank you for the feedback.

[Splaktar]

I've got a fix for the related issue in PR https://github.com/angular/material/pull/11500. However, testing on Android shows that the fix for that issue doesn't help with this Chrome for Android issue.

After testing this some more on Chrome for Android 70, I found that it's hard to get the autocomplete in the Basic Demo usage to focus and/or open the drop down at all. This applied to AngularJS Material 1.1.5, 1.1.10, HEAD, and another branch where I merged in all of the open autocomplete a11y PRs.

This doesn't appear to affect autocompletes that use md-floating-label. These are wrapped in an md-input-container while non-floating label autocompletes are not.

I am able to get focus on the autocomplete and open the dropdown if I long press or sometimes when I double tap. However, focus should happen with a single tap.

It seems like this may be a Chrome for Android bug, but I need to do some more investigation.

[AndrusovaK]

@Splaktar thanks for your reply!

I'll try to use autocomplete with md-floating-label for now.

[AndrusovaK]

Hi, @Splaktar!
I've tried to use md-floating-label autocomplete with md-clear-button="true" and md-min-length="0" attributes. In this configuration it has same focus problems on Android as regular autocomplete, unfortunately.

I tested it with 1.1.10 and HEAD, here is example from demo page with md-clear-button="true" and md-min-length="0" attributes.

[Splaktar]

@AndrusovaK I tried your CodePen with Chrome 76 and Android 9 and I was unable to reproduce any focus issues.

Additionally, the changes in PR https://github.com/angular/material/pull/11782 appear to have fixed these issues. I can verify that these issues still exist in 1.1.20 and not in HEAD. This will be part of the 1.1.21 release.